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。

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

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

1 个答案: