Vous souhaitez obtenir des options sur le changement de valeur d'entrée dans React Select

Question

J'ai un composant React-Select et je souhaite ajouter une fonctionnalité pour qu'une fois que quelqu'un entre quelque chose dans React-Select, il y ait une demande API pour obtenir les éléments liés au mot-clé saisi, comment puis-je faire cela

Answer 1

Vous pouvez le faire sans aucun appel API, utilisez simplement la méthode de filtrage pour filtrer vos options

Answer 2

Vous devriez essayer de regarder AsyncSelect depuis "react-select/async" Créez ensuite une fonction dans le composant pour charger les options de l'API, la fonction doit accepter une chaîne d'entrée et un rappel et doit effectuer un appel API basé sur la chaîne d'entrée. Des choses comme ça

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

Transmettez ensuite la fonction loadOptions dans la propriété loadOptions de votre composant

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