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

我正在使用称为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的选项。
搜索的东西工作，但我想最初隐藏选项。

请帮忙！谢谢！

最佳答案

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

示例（CodeSandbox）

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