Kontrollierte Formulare

Lerne, jedes Formularfeld über den React-State zu steuern, damit du zuverlässige Daten validieren und absenden kannst.

8 Min. · 3 Fragen

In React wird ein Formular vorhersehbar, wenn jedes Feld kontrolliert ist: Der angezeigte Wert kommt aus dem State der Komponente, und jeder Tastendruck läuft über onChange, um diesen State zu aktualisieren. Das DOM ist nicht mehr die Quelle der Wahrheit - dein State ist es. In der Praxis bindest du die value-Prop an eine State-Variable und stellst einen Handler bereit, der die Update-Funktion aufruft.

import { useState } from "react";

function EmailField() {
  const [email, setEmail] = useState("");

  return (
    <input
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

Ein echtes Formular hat selten nur ein einziges Feld. Statt useState-Aufrufe zu stapeln, fasst du die Werte in einem Objekt zusammen und schreibst einen generischen Handler. Das name-Attribut jedes Feldes muss exakt einem Schlüssel des Objekts entsprechen: Genau das sagt dem Handler, welche Eigenschaft er aktualisieren soll.

const [form, setForm] = useState({
  username: "",
  password: "",
});

function handleChange(e) {
  const { name, value } = e.target;
  setForm((prev) => ({ ...prev, [name]: value }));
}

Bleibt noch das Absenden. Standardmäßig lädt der Browser die Seite neu, wenn ein Formular abgeschickt wird: Rufe e.preventDefault() ganz oben in deinem onSubmit-Handler auf. Das ist auch der richtige Ort, um die Daten zu validieren, bevor du sie sendest, da der gesamte Formular-State bereits zur Hand ist.

function handleSubmit(e) {
  e.preventDefault();
  if (form.username.trim() === "") {
    alert("Username is required.");
    return;
  }
  console.log("Submitting:", form);
}

return (
  <form onSubmit={handleSubmit}>
    <input
      name="username"
      value={form.username}
      onChange={handleChange}
    />
    <button type="submit">Create account</button>
  </form>
);

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was macht ein kontrolliertes Feld in React aus?
   • Sein Wert wird im DOM gespeichert und mit einer Ref gelesen
   • Sein Wert kommt aus dem State und jeder Tastendruck läuft über onChange
   • Es ist schreibgeschützt, bis das Formular abgesendet wird
   • Es validiert automatisch die Daten, die du eintippst
2. Du übergibst value={email} an ein <input>, ohne ein onChange bereitzustellen. Was passiert?
   • Das Feld friert ein: Tippen hat keine Wirkung mehr
   • Das Feld funktioniert normal, React verwaltet die Eingabe von selbst
   • Die Komponente stürzt beim ersten Rendern ab
3. Wofür ist e.preventDefault() im onSubmit-Handler da?
   • Um das Neuladen der Seite zu verhindern, das durch das native Absenden des Formulars ausgelöst wird
   • Um die Formularfelder automatisch zu leeren
   • Um zu verhindern, dass das Event sich zu den Elternkomponenten fortpflanzt
   • Um die HTML-Validierung des Browsers zu deaktivieren