Ce blog est destiné aux personnes qui ont une compréhension de base de react.js

Dans ce blog, nous allons créer une application simple dans react.js qui affiche une barre de recherche en haut et une liste de noms de fleurs ci-dessous, alias nos fausses données. La barre de recherche nous permettra de taper dans un champ de saisie qui recherchera nos fausses données et affichera instantanément le (s) nom (s) de la fleur à l'écran. Nous utiliserons des composants basés sur les classes pour y parvenir.

Commencer

Pour créer un nouveau projet de réaction, exécutez:

Supprimez tous les fichiers inutiles comme indiqué ci-dessous:

Créez un sous-dossier de composant dans le dossier src. Créez ensuite deux composants enfants nommés FlowersContainer et SearchBar.

Utilisez le code suivant pour le style CSS. Vous êtes invités à personnaliser l'application à votre guise.

Composant d'application de configuration

App.js sera votre composant principal où toutes vos données et méthodes d'instance seront stockées. Voir l'image ci-dessous pour mon code.

Maintenant, décomposons ce code!

Ligne 7: état

Dans notre objet d'état, nous avons un état «fleurs» qui a un tableau de noms de fleurs comme valeur. Nous avons également un état «searchTerm» qui a une chaîne vide comme valeur qui représentera le terme de recherche que nous allons taper dans notre champ d'entrée de recherche.

Ligne 21: fonction handleSearchTermChange

La fonction handleSearchTermChange sera transmise comme accessoire dans le composant SeachBar. Lorsqu'il est déclenché, setState mettra à jour la valeur de «searchTerm».

Ligne 25: fonction filterFlower

La fonction filterFlower sera notre fonction de rappel qui sera passée dans la méthode de filtrage ci-dessous. La méthode toLowerCase () changera les chaînes en minuscules. La méthode split () divisera la chaîne en sous-chaînes à chaque espace de la chaîne et placera les sous-chaînes dans un tableau. Ensuite, la méthode join () prendra ce tableau de chaînes et les combinera en une seule chaîne sans espaces. Lorsque l'utilisateur tape dans le champ de saisie, l'entrée peut être insensible à la casse et ne tiendra pas compte des espaces vides dans les noms de fleurs avec plusieurs mots. Vous avez peut-être remarqué que nous avons également inclus «indexOf (normalisé)! == -1» dans la fleur. Cela vérifie si la chaîne que nous tapons existe dans les noms des fleurs.

Ligne 30: JSX

Dans la méthode de rendu du composant App, nous avons le composant enfant SearchBar et nos méthodes filter et map avec le composant FlowersContainer passé. La méthode filter créera un nouveau tableau avec tous les noms de fleurs qui passent le test qui est notre fonction filterFlower. Ensuite, nous appelons la méthode map qui prend dans notre tableau filtré de fleurs à analyser en composants de fleurs individuels.

Créer un composant FlowersContainer

Le composant FlowersContainer affichera les éléments qui ressemblent à tout ce que nous tapons dans le champ d'entrée de recherche.

Créer un composant SearchBar

Le composant SearchBar contient un événement onChange qui transmet notre fonction handleSearchTermChange qui définit le searchTerm sur «e.target.value». Lorsque nous tapons dans le champ d'entrée de recherche, setState est déclenché dans handleSearchTermChange, puis notre composant App est à nouveau rendu.

Votre produit final devrait ressembler à ceci:

Voilà! J'espère que vous avez apprécié mon petit tutoriel. Ce n'est qu'une des nombreuses façons de créer une barre de recherche dans react.js.

Ressources: