如何禁用 selected 值在 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> 
  ); 
};

目前我的代码看起来像上面，它所做的是，它显示了这样的东西 ScreenShot

我不想在搜索输入中显示选定的值bar.Is有什么方法可以禁止选定的选项在输入栏中显示？

Select 栏的代码

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

Answer 1

我怀疑这与您在此处传递给 Select 组件的 hideSelectedOptions 道具有关：

<Select hideSelectedOptions={false} />

我会尝试将其设置为 true（或将其删除），看看是否能解决您的问题。

Answer 2

您可以仅在 isSelected 为假时简单地呈现您的选项，在其他情况下，使用三元条件发送空 div :

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/>
};

在每种情况下，您都必须 return 一个 JSX 节点，returning null（或等效的）将生成一个 warning/error。

Answer 3

一个选项是用空 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

有一个新的道具controlShouldRenderValue = { false }然后它不会在输入栏中显示选定的选项，即使在如下所述的下拉列表中选择选项后也是如此

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

因此，在搜索框中它将显示占位符

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

How to disable selected values from getting displayed in input bar in react-select?

javascript

reactjs

react-select