Saisie semi-automatique avec React composants
Je veux un workflow de suggestion automatique comme ci-dessous. Au lieu d'afficher l'ID numérique, disons 123 dans un champ de texte, je souhaite afficher des informations personnalisées.
Bien que je puisse faire le reste avec React, je dois encore effectuer la saisie semi-automatique. J'ai deux exigences:
- Lorsque cette option est sélectionnée, fournissez un rappel avec des données riches
{id: 123, title:"Prince Hall", info:"123 Foo St"} - Avoir un rendu personnalisé qui me permet de réutiliser des modèles JSX
Les saisies automatiques JQueryUI et Twitter ont les deux fonctionnalités. Mais le rendu de leur élément prend une chaîne , mais je veux réutiliser des modèles JSX qui sont basés sur un dom virtuel. Je ne veux pas dupliquer/coder en dur les modèles JSX avec des modèles de chaînes.
Découvrez react-select . Il est simple, beau et compte actuellement le plus d'étoiles Github. Démo en direct ici .
React-Autosuggest est un composant qui répond aux exigences. Il a un rendu personnalisé qui fonctionne nativement avec les éléments React.
Nous pouvons le faire gérer des objets JS au lieu de chaînes simples.
- les accessoires
onSuggestionSelectedsont un rappel pour obtenir la suggestion sélectionnée suggestionRendererla méthode prend la suggestion et retourne React balisage
Un autre puissant module Auto-Complete/Auto-Suggest est ' rétrogradation ' qui a une grande variété d'accessoires pour une meilleure personnalisation. Différent de react-select qui s'ouvre comme une boîte de sélection, le rétrogradage est une zone de texte qui affiche une liste de suggestions de mots lorsque sa valeur change.