Dieser Blog richtet sich an Personen, die ein grundlegendes Verständnis von react.js haben

In diesem Blog erstellen wir eine einfache Anwendung in react.js, die oben eine Suchleiste und unten eine Liste mit Blumennamen anzeigt, auch bekannt als unsere gefälschten Daten. Über die Suchleiste können wir in ein Eingabefeld eingeben, das unsere gefälschten Daten durchsucht und die Blumennamen sofort auf dem Bildschirm anzeigt. Wir werden klassenbasierte Komponenten verwenden, um dies zu erreichen.

Einstieg

Führen Sie Folgendes aus, um ein neues Reaktionsprojekt zu erstellen:

Entfernen Sie alle unnötigen Dateien wie unten hervorgehoben:

Erstellen Sie einen Komponentenunterordner im Ordner src. Erstellen Sie dann zwei untergeordnete Komponenten mit den Namen FlowersContainer und SearchBar.

Verwenden Sie den folgenden Code für das CSS-Styling. Sie können die Anwendung gerne nach Ihren Wünschen gestalten.

App-Komponente einrichten

App.js ist Ihre Hauptkomponente, in der alle Ihre Daten und Instanzmethoden gespeichert werden. Siehe Bild unten für meinen Code.

Lassen Sie uns nun diesen Code aufschlüsseln!

Zeile 7: Zustand

In unserem Statusobjekt haben wir einen Status "Blumen", dessen Wert eine Reihe von Blumennamen enthält. Wir haben auch den Status "searchTerm", dessen Wert eine leere Zeichenfolge enthält, die den Suchbegriff darstellt, den wir in unser Sucheingabefeld eingeben.

Zeile 21: handleSearchTermChange-Funktion

Die Funktion handleSearchTermChange wird als Requisite in der SeachBar-Komponente übergeben. Bei Auslösung aktualisiert setState den Wert von "searchTerm".

Zeile 25: FilterFlower-Funktion

Die filterFlower-Funktion ist unsere Rückruffunktion, die in der folgenden Filtermethode übergeben wird. Die toLowerCase () -Methode ändert die Zeichenfolgen in Kleinbuchstaben. Die split () -Methode unterteilt die Zeichenfolge an jeder Stelle in der Zeichenfolge in Teilzeichenfolgen und platziert die Teilzeichenfolgen in einem Array. Dann nimmt die join () -Methode dieses Array von Zeichenfolgen und kombiniert sie zu einer Zeichenfolge ohne Leerzeichen. Wenn der Benutzer in das Eingabefeld eingibt, kann bei der Eingabe die Groß- und Kleinschreibung nicht berücksichtigt werden, und Leerzeichen in den Blumennamen mit mehreren Wörtern werden ignoriert. Möglicherweise haben Sie bemerkt, dass wir auch "indexOf (normalized)! == -1" in die Blume aufgenommen haben. Dadurch wird überprüft, ob die von uns eingegebene Zeichenfolge in den Blumennamen vorhanden ist.

Zeile 30: JSX

In der Rendermethode der App-Komponente haben wir die untergeordnete SearchBar-Komponente und unsere Filter- und Zuordnungsmethoden mit der übergebenen FlowersContainer-Komponente. Die Filtermethode erstellt ein neues Array mit allen Blumennamen, die den Test bestehen, der unsere filterFlower-Funktion ist. Dann rufen wir die Kartenmethode auf, die unsere gefilterte Reihe von Blumen aufnimmt, um sie in einzelne Blütenkomponenten zu analysieren.

Erstellen Sie eine FlowersContainer-Komponente

Die FlowersContainer-Komponente zeigt die Elemente an, die denen ähneln, die wir in das Sucheingabefeld eingeben.

Erstellen Sie eine SearchBar-Komponente

Die SearchBar-Komponente enthält ein onChange-Ereignis, das unsere handleSearchTermChange-Funktion übergibt, mit der searchTerm auf "e.target.value" gesetzt wird. Wenn wir in das Sucheingabefeld eingeben, wird setState in handleSearchTermChange ausgelöst und unsere App-Komponente wird erneut gerendert.

Ihr Endprodukt sollte folgendermaßen aussehen:

Hier hast du es! Ich hoffe dir hat mein kleines Tutorial gefallen. Dies ist nur eine der vielen Möglichkeiten, eine Suchleiste in react.js zu erstellen.

Ressourcen: