如何禁用所选值显示在 react-select 的输入栏中？

Question

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

const Option = props => { 
  //const temp = "some";
  //
  return ( 
  <div> 
    <components.Option {...props}> 
      <input type="checkbox" checked={props.isSelected} onChange={() => null} /> 
      <label>{props.value}</label> 
    </components.Option>
  </div> 
  ); 
};

Currently my code looks like above, what it does is, it is displaying something like this ScreenShot

I don't want to display selected values in search input bar.Is there any way to disable selected option from getting displayed in input bar ?

Code for Select Bar

<Select components={{ Option }} isMulti closeMenuOnSelect={false} hideSelectedOptions={false} options={options} />

Answer 1

there is a new props controlShouldRenderValue = { false } then it will not display selected option in input bar, even after selecting option from drop down list as mention below

<Select
 components={{ Option }}
 isMulti closeMenuOnSelect={false}
 hideSelectedOptions={false}
 controlShouldRenderValue = { false }
 options={options} />

So, in the search box it will display placeholder

Answer 2

I suspect it's to do with the hideSelectedOptions prop you're passing into the Select component here:

<Select hideSelectedOptions={false} />

I would try setting it to true (or removing it) and see if that solves your issue.

Answer 3

One option is to define the custom component with an empty div

 const MultiValueContainer = props => { return ( <div></div> ); }; class PriceFilter extends React.Component { constructor(props) { super(props); } render() { return [ <Select isMulti components={{ MultiValueContainer }} options={this.props.options} className="basic-multi-select" classNamePrefix="select" hideSelectedOptions={false} closeMenuOnSelect={false} /> ]; } }

Answer 4

You could simply render out your options only if their isSelected is false, and in the other case, send out an empty div using a ternary condition :

const Option = props => {
    return !props.isSelected ?
        <div>
            <components.Option {...props}>
                <input type="checkbox" checked={props.isSelected} onChange={() => null} />
                <label>{props.value}</label>
            </components.Option>
        </div>
        :
        <div/>
};

You will have to return a JSX node in every cases, returning null (or an equivalent) will generate a warning/error.