javascript - 启用选择列表仅在搜索时可见

Question

我正在使用名为 react-select 的 API 来选择语言选项。

 <Select
   isMulti
   name="langs"
   options={langOptions}
   defaultValue={{
        value: "English",
        label: "English",
        nativeName: "English",
        isFixed: true,
        backgroundColor: "black"
   }} 
   onChange={(data, e) => handleSelectLanguages(data, e)}

/>

但是选项太多，所以我想隐藏选项，只显示与我的键盘输入匹配的选项。

例如，如果我开始输入 k，就会显示带有 K 的选项。搜索有效，但我最初想隐藏选项。

求助!谢谢!

Answer 1

您可以控制输入值和 isMenuOpen 属性，仅当输入字符串的长度大于 0 时才将其设置为 true。

示例

class App extends React.Component {
  state = {
    selectedOption: null,
    inputValue: ""
  };

  handleOptionChange = selectedOption => {
    this.setState({ selectedOption });
  };

  handleInputChange = inputValue => {
    this.setState({ inputValue });
  };

  render() {
    const { selectedOption, inputValue } = this.state;

    return (
      <Select
        value={selectedOption}
        inputValue={inputValue}
        onChange={this.handleOptionChange}
        onInputChange={this.handleInputChange}
        menuIsOpen={inputValue.length > 0}
        options={options}
      />
    );
  }
}