Kursinhalt
React-Meisterschaft
React-Meisterschaft
Herausforderung: Erstellen Einer Formular-Komponente
Aufgabe
In dieser Herausforderung erstellen Sie eine Form
-Komponente mit zwei Eingabefeldern: email
und password
. Das Ziel ist es, den useRef
-Hook zu verwenden, um auf die Eingabeelemente zu verweisen und die Logik zur Formularübermittlung zu handhaben.
Anweisungen
Importieren Sie den
useRef
-Hook aus derreact
-Bibliothek.Deklarieren Sie innerhalb der
Form
-Komponente zweiuseRef
-Variablen:emailRef
undpasswordRef
, initialisiert mitnull
.Setzen Sie die Eingabefelder zurück, indem Sie ihre Werte mit den
useRef
-Variablen auf einen leeren String setzen.
Um den notwendigen Hook aus der React-Bibliothek zu importieren, fügen Sie eine
import
-Anweisung hinzu.Für diese Aufgabe verwenden wir den
useRef
-Hook, um Daten zu speichern, ohne das Markup zu beeinflussen.Um den passenden Variablennamen für den Ref zu bestimmen, wählen Sie ein Wort, das mit dem Ref in Verbindung steht, und fügen Sie "Ref" am Ende hinzu.
Um den Ref mit
null
zu initialisieren, übergeben Sienull
als Anfangswert in den Klammern desuseRef
-Hooks (z.B.useRef(null)
).Um die Formulareingabe zurückzusetzen, verwenden Sie die entsprechende Ref-Variable und weisen Sie ihrem
.current.value
einen leeren String (""
) zu.
Danke für Ihr Feedback!