𝗩𝗲𝗿𝘀𝘁𝗲𝗵𝗲𝗻 𝘃𝗼𝗻 𝗙𝗼𝗿𝗺𝘂𝗹𝗮𝗿𝗲𝗻 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁
Nutzer interagieren über Formulare mit Web-Apps. Du verwendest sie für Logins, Suchanfragen und Kontaktseiten. React vereinfacht die Verwaltung dieser Daten durch State.
Controlled Components
In React verwendest du häufig Controlled Components. Das bedeutet, dass der React-State den Eingabewert verwaltet.
So funktioniert es: • Die value-Prop verbindet das Input-Feld mit deinem State. • Das onChange-Event aktualisiert den State, während der Nutzer tippt. • React bleibt die Single Source of Truth.
Der Prozess folgt diesem Ablauf: Benutzereingabe → onChange-Event → State-Update → Re-render → Aktualisierte UI
Verwaltung mehrerer Felder
Du benötigst nicht für jedes Input-Feld einen separaten State. Du kannst ein einzelnes Objekt verwenden, um alle Daten zu speichern.
Nutze dieses Muster: • Verwende ein einzelnes State-Objekt für das gesamte Formular. • Verwende das name-Attribut in deinen Inputs. • Erstelle eine einzige handleChange-Funktion, um den State zu aktualisieren.
Die Syntax [e.target.name]: e.target.value aktualisiert das spezifische Feld, das die Änderung ausgelöst hat. Das hält deinen Code sauber.
Handling von Submissions
Wenn ein Nutzer ein Formular absendet, aktualisiert der Browser standardmäßig die Seite. Das unterbricht deine App.
Verwende e.preventDefault() innerhalb deiner onSubmit-Funktion. Dies verhindert das Neuladen der Seite und ermöglicht es React, die Daten zu verarbeiten.
Spezielle Input-Typen
Verschiedene Inputs erfordern unterschiedliche Eigenschaften: • Text-Inputs verwenden e.target.value. • Checkboxen verwenden e.target.checked. • Select-Menüs verwenden die value-Prop, um die gewählte Option zu verfolgen.
Tipps zur Validierung
Validiere Daten immer, bevor du sie abschickst. Prüfe auf: • Pflichtfelder. • Korrekte E-Mail-Formate. • Mindestlänge von Passwörtern.
Best Practices für React-Formulare
- Verwende Controlled Components anstelle von Refs.
- Speichere zusammengehörige Felder in einem einzigen Objekt.
- Verwende aussagekräftige name-Attribute für jeden Input.
- Verhindere das standardmäßige Neuladen der Seite beim Absenden.
- Verwende einen einzigen Change-Handler für alle Text-Inputs.
Wenn du diese Schritte beherrschst, kannst du professionelle Webanwendungen erstellen.
Quelle: https://dev.to/aj_arul/understanding-forms-in-react-19gj