Möchten Sie Optionen für die Änderung des Eingabewerts in der Reaktionsauswahl erhalten?

Question

Ich habe eine React-Select-Komponente und möchte eine Funktionalität hinzufügen, sodass, sobald jemand etwas in React-Select eingibt, eine API-Anfrage erfolgen sollte, um die Elemente abzurufen, die sich auf das eingegebene Schlüsselwort beziehen. Wie kann ich das tun

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