Event-Behandlung: onClick und onChange

Ziel: Verarbeiten Sie Klicks und Textänderungen mithilfe von Reacts synthetischen Events, damit sich die Anwendung in verschiedenen Browsern konsistent verhält.

• onClick löst Aktionen aus
• onChange liest Eingabewerte aus
• Das Event-Objekt enthält Details

Hängen Sie einen Handler an: onClick={handle}. Halten Sie Funktionen kurz und aktualisieren Sie den State mit Settern. Wenn Sie den vorherigen Wert verwenden, bevorzugen Sie den funktionalen Updater.

onChange wird ausgelöst, wenn die Benutzerin oder der Benutzer eine Eingabe bearbeitet. Lesen Sie den Text aus event.target.value und verwenden Sie den State als einzige Quelle der Wahrheit.

Demo: Erhöhen Sie den Wert beim Klicken, spiegeln Sie die Eingabe mit onChange und verhindern Sie mit event.preventDefault() das Neuladen beim Absenden des Formulars.

Synthetische Events kapseln native Events, damit sie sich konsistent verhalten. Lesen Sie Werte innerhalb des Handlers aus und halten Sie Handler kurz und fokussiert.

• Verwenden Sie event.preventDefault() für Formulare
• Verwenden Sie event.target.value für Eingaben

Tipps:

• Verändern Sie das DOM nicht direkt, sondern lassen Sie den State die Benutzeroberfläche steuern.
• Vermeiden Sie umfangreiche Logik direkt in Handlern – rufen Sie kleine Funktionen auf.
• Verwenden Sie den funktionalen Updater, wenn Sie den vorherigen State verwenden.

Zusammenfassung: Verwenden Sie onClick für Aktionen und onChange für Eingaben. Lesen Sie Werte aus event.target.value aus und verhindern Sie bei Bedarf das standardmäßige Neuladen von Formularen.