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

我不想在搜索输入栏中显示选定的值。是否有任何方法可以禁止选定的选项显示在输入栏中？

选择栏的代码

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

Answer 1

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

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

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

Answer 2

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

<Select hideSelectedOptions={false} />

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

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

仅当选项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/>
};

在每种情况下，您都必须返回JSX节点，返回null（或等效值）将生成警告/错误。

如何在React-Select中禁止所选值显示在输入栏中？

4 个答案: