防止在 SELECT 下拉菜单中加载选项，直到输入最少的字符

Question

此处我尝试仅在输入最少 5 个字符时才在 select 下拉列表中加载选项。这是因为我的选项列表非常庞大，它使我的应用程序性能很差。

我试过下面的代码，请建议我如何调整它以使其工作。

this.state= {
  options_show: false, // It's false in state
};

 inputEntered(e) {
    let value = e.target.value;
    if (value.length > 5){
      this.setState({options_show: true})
    }
  }

  handleChangeName = (e, i) => {
    let { nameID, nameIDArray } = this.state;
    let filteredID = namesData.filter(name => name.name == e.value)
      .map((name) => {
        return name.id
      })
    nameIDArray[i] = filteredID[0];
    this.setState({ nameIDArray });
  };

  <Select placeholder="Enter Profile Name"
          name="SID0"
          onChange={(e) => this.handleChangeName(e, 0)}
          options={this.state.options_show ? options: []}
          onInputChange={this.inputEntered}
          // openMenuOnFocus={false}
          // openMenuOnClick={false}
        />

这并不限制此处的输入，在输入每个字符时它开始加载整个列表。

Answer 1

试试这个希望它会工作:)

this.state= {
    options_show: false, // It's false in state
}

inputEntered(inputText) {                     
    if (inputText.length >= 5) {
        this.setState({ options_show: true })
    } else {
        this.setState({ options_show: false })
    }
}

<Select placeholder="Enter Profile Name"
    name="SID0"
    onChange={(e) => this.handleChangeName(e, 0)}
    options={this.state.options_show ? options: []}
    onInputChange={(e) => this.inputEntered(e)}
/>

防止在 SELECT 下拉菜单中加载选项，直到输入最少的字符

Prevent loading options in SELECT drop down until minimum characters are entered

select

reactjs

react-select