Kursinhalt
React-Meisterschaft
React-Meisterschaft
Herausforderung: Sichtbarkeit Umschalten
Aufgabe
Erstellen Sie eine Komponente, die einen Button und einen Textabsatz enthält. Implementieren Sie die notwendige Logik mit dem useState
Hook, um die Sichtbarkeit des Textabsatzes zu toggeln, wenn der Button geklickt wird.
Anweisungen
Importieren Sie den
useState
Hook aus der React-Bibliothek.Deklarieren Sie eine Zustandsvariable namens
isVisible
mit demuseState
Hook. Initialisieren Sie sie mit dem Wertfalse
.Implementieren Sie eine Funktion namens
toggleVisibility
, die beim Aufruf denisVisible
Zustand zwischentrue
undfalse
wechselt.Verwenden Sie die
toggleVisibility
Funktion alsonClick
Handler für den Button.
Fügen Sie eine
import
-Anweisung hinzu, um den entsprechenden Hook aus der React-Bibliothek zu importieren.Für diese Aufgabe verwenden wir den
useState
-Hook, da wir den Zustand der Absatzsichtbarkeit verwalten.Um den geeigneten Variablennamen für den Zustand zu bestimmen, beobachten Sie die Funktion, die mit der Zustandssetzung verbunden ist, nämlich
setIsVisible
. Entfernen Sie das Präfix "set" und verwenden Sie einen Kleinbuchstaben für den ersten Buchstaben des Variablennamens, derisVisible
sein sollte.Um die
toggleVisibility
-Funktion beim Klicken auf den Button aufzurufen, weisen Sie sie als Wert für dasonClick
-Attribut des Buttons zu.
Danke für Ihr Feedback!