React select - 更改 selected 值的显示方式

Question

我正在使用react select control in my ReactJs based application. I am using this as a multi-select control. But once the user selects more than 1 value, instead of showing all the selected values, I want to show the first selected value + N. So if two values are selected, I want to say 'XYZ' + 1. If only one value is selected I will say 'XYZ'. here is a working example

Answer 1

您需要像下面那样覆盖 ValueContainer。工作 sandbox

const ValueContainer = props => {
  let length = props.getValue().length;

  return (
    <components.ValueContainer {...props}>
      {length > 1 ? (
        <>
          {props.children[0][0]}
          {!props.selectProps.menuIsOpen && `${length - 1} Items`}
          {React.cloneElement(props.children[1])}
        </>
      ) : (
        <>{props.children}</>
      )}
    </components.ValueContainer>
  );
};

在 Select 中您需要覆盖

<Select
 components={{ValueContainer}}
 hideSelectedOptions={false}
 ...
/>

React select - 更改 selected 值的显示方式

React select - change the way selected values are shown

javascript

reactjs

react-select