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

Question

我有一个 select 下拉菜单，大约有 17k 个选项，因此无法直接呈现它们。相反，我会等待用户开始在下拉搜索栏中搜索，一旦数据缩小到可呈现的大小，下拉列表就会显示。

我似乎找不到使用 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 侦听器在 select 选项时触发，但在搜索栏中输入文本时不会触发。

我错过了什么？

Answer 1

您需要使用 AsyncSelect 而不是 Select 然后使用输入值和回调来获取与输入匹配的数据：

import React, { Component } from 'react';

import AsyncSelect from 'react-select/async';

const loadOptions =async (inputValue, callback) => {
 const response = await fetch('some endpoint');//use that input value in the endpoint
    let data = await response.json();
  callback(data)
};

export default class WithCallbacks extends Component {
  state = { inputValue: '' };
  handleInputChange = (newValue) => {
    const inputValue = newValue.replace(/\W/g, '');
    this.setState({ inputValue });
    return inputValue;
  };
  render() {
    return (
      <div>
     
        <AsyncSelect
          cacheOptions
          loadOptions={loadOptions}
          defaultOptions
          onInputChange={this.handleInputChange}
        />
      </div>
    );
  }
}

请检查这个example

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

How to set an event listener for search input change using react-select?

javascript

reactjs

react-select