如何使用react-select为搜索输入更改设置事件侦听器？

编程问答 2022-08-12

问题描述

我有一个大约有17,000个选项的选择下拉列表，因此，完全渲染它们不是一个选项。取而代之的是，我将等待用户开始在下拉搜索栏中搜索，一旦数据缩小到可渲染的大小，就会显示下拉菜单。

我似乎找不到使用 react-select 为搜索栏设置事件处理程序的方法。

这是MRE：

import Select from 'react-select';

class CategoryDropdown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],selected: '',}
  }

  async componentDidMount() {
    const response = await fetch('some endpoint');
    let data = await response.json();
    this.setState({
      data,});
  }

  handleChange(event) {
    console.log(event);
  }

  render() {
    return (
      <Select
        name="category_id",options={this.state.data}
        value={this.state.selected}
        onChange={this.handleChange}
        onInputChange={this.handleChange}
      />
    );
  }
}

handleChange侦听器在选择选项时触发，但在搜索栏中输入文字时不会触发。

我想念什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreact-selectreactjsreactjs