Zusammenfassung

In dieser Lektion hast du gelernt:

• Ein kontrolliertes Feld zeigt an, was im State steht, value={name}, und sein onChange ändert den State: onChange={(event) => setName(event.target.value)}. Die Seite kann also zeigen, was getippt wird, während es getippt wird, und setName("") leert das Feld.
• Ein Feld mit value braucht onChange. Ohne es hält React das Feld so, wie der State es sagt, sodass man nichts hineintippen kann, und warnt in der Konsole.
• Eine textarea bekommt value wie ein input. Der value eines select ist der value seiner gewählten Option, und der State wählt sie.
• Ein Kontrollkästchen wird mit checked kontrolliert, und sein neuer State ist event.target.checked, true oder false.
• Der Wert eines Feldes ist Text, auch bei type="number". Behalte den Text im State und verwende Number(), wo du rechnest. Ein leeres Feld ist dort 0.
• <form onSubmit={absenden}> führt den Handler aus, wenn das Formular abgesendet wird, mit seinem Button oder der Eingabetaste. Rufe zuerst event.preventDefault() auf, sonst lädt die Seite neu, und der ganze State ist weg.
• Hinzufügen über ein Formular: eine Updater-Funktion, die ein neues Array mit dem neuen Eintrag zurückgibt, setEintraege((eintraege) => [...eintraege, { id: Date.now(), text: text }]), und danach das Feld leeren.
• Der Handler prüft, was getippt wurde: eine Fehlermeldung im State, gesetzt vor einem frühen return. disabled={text.trim() === ""} verhindert, dass ein Button benutzt wird, solange seine Bedingung wahr ist.

In der nächsten Lektion, Checkpoint: Quizspiel, setzt du State, Ereignisse und Bedingungen in einem eigenen Spiel ein: eine Frage, Antwort-Buttons, eine Punktzahl und ein Endbildschirm.

Vorher aber noch eine kleine Übung: ein Bestellformular für das Festival-T-Shirt. App.jsx enthält das Formular, aber noch keinen State.