Kursinhalt
React-Meisterschaft
React-Meisterschaft
Herausforderung: Welt der Astronomie App
Aufgabe
In dieser Aufgabe werden Sie an derselben App weiterarbeiten und eine Filterfunktion hinzufügen, die es den Benutzern ermöglicht, Planeten nach Namen zu filtern.
Um die Filterkomponente zu erstellen, müssen wir ein Formular erstellen, das den Zustand des Eingabewerts beibehält. Zusätzlich benötigen wir eine Funktion, die auf Änderungen des Eingabewerts reagiert.
Anweisungen
In der App.jsx
:
Initialisieren Sie den Zustand für den Eingabewert mit dem
useState
Hook. Setzen Sie den Anfangswert auf einen leeren String (""
).Überprüfen Sie im
useEffect
Hook die Logik, die die Daten filtert, wenn der Benutzer das Eingabefeld ändert. Entscheiden Sie, was in das Abhängigkeitsarray desuseEffect
Hooks aufgenommen werden soll, um sicherzustellen, dass es bei Bedarf ausgeführt wird.Füllen Sie die Variable
appData
mit den richtigen Daten. Die VariableappData
repräsentiert dascontext
Objekt, und Sie müsseninputValue
undhandleInputChange
für dieFilter
Komponente einbeziehen.
In der Filter.jsx
:
Greifen Sie mit dem inputValue
Hook auf die Funktionen handleInputChange
und useContext
zu.
Um den Zustand zu initialisieren, verwenden Sie den
useState
Hook.Für den
useEffect
Hook, fügen SieinputValue
in das Abhängigkeitsarray ein, da die Filterung von der Benutzereingabe abhängt.Um die Daten für
appData
festzulegen, fügen Sieplanets
,inputValue
undhandleInputChange
ein.Um auf
inputValue
undhandleInputChange
zuzugreifen, verwenden Sie denContext
, der als Wert für denuseContext
Hook bereitgestellt wird.
Danke für Ihr Feedback!