想要在反应选择中获取有关 inputValue 更改的选项

Question

我有一个react-select组件，我想添加一个功能，这样一旦有人在react-select中输入某些内容，就应该有一个api请求来获取与输入的关键字相关的项目，如何才能我这样做

Answer 1

你可以做到这一点，无需任何 API 调用，只需使用过滤器方法来过滤你的选项

Answer 2

您应该尝试从“react-select/async”查看 AsyncSelect 然后在组件中创建一个函数来从 API 加载选项，该函数应接受输入字符串和回调，并应根据输入字符串进行 API 调用。像这样的事情

const loadOptions = (inputValue, callback) => {
    // api call here
    fetch('your-api-url?${inputValue}')
      .then(response => response.json())
      .then(data => {
         // do your work here
         const options = //transform data here
         callback(options)
      });
};

然后在您的组件中将 loadOptions 函数传递到 loadOptions 属性中

const YourComponent = () => {
    return (
       <AsyncSelect
         cacheOptions
         defaultOptions
         loadOptions={loadOptions}
       />
    );
};