Ein Formular absenden

Bisher haben die Felder nur gezeigt, was getippt wurde. Um die Tickets zu buchen, sendet der Nutzer das Formular ab. Wie im JavaScript-Kurs kommen die Felder in ein form mit einem Absende-Button, und in React bekommt das Formular onSubmit:

import { useState } from "react";

export default function App() {
    const [email, setEmail] = useState("");
    const [angemeldet, setAngemeldet] = useState(false);

    function absenden(event) {
        event.preventDefault();
        setAngemeldet(true);
    }

    return (
        <main>
            <form onSubmit={absenden}>
                <label htmlFor="email">E-Mail</label>
                <input
                    id="email"
                    value={email}
                    onChange={(event) => setEmail(event.target.value)}
                />
                <button type="submit">Anmelden</button>
            </form>
            {angemeldet && <p>Danke! Wir schreiben dir an {email}.</p>}
        </main>
    );
}

React ruft onSubmit auf, wenn das Formular abgesendet wird, mit seinem Button oder mit der Eingabetaste in einem seiner Felder. Und genau wie im JavaScript-Kurs führt der Browser danach seine Standardaktion aus: Er sendet die Felder an einen Server und lädt die Seite neu. Für eine React-App heißt das, ganz von vorn anzufangen, mit allem State wieder auf seinem Startwert. Probiere es vor dem Start in der Vorschau dieser Übung aus: Tippe einen Namen und klicke auf Buchen. Die Seite lädt neu, und das Feld ist leer. event.preventDefault() hält den Browser auf, rufe es also als Erstes im Handler auf.

Der Handler muss die Felder nicht lesen: Was getippt wurde, steht schon im State, hier in email. Er entscheidet nur, was passiert, und hier merkt er sich im State, dass der Nutzer sich angemeldet hat.

Ein Formular, das seine Aufgabe erfüllt hat, macht oft einer Meldung Platz. Das erledigt ein frühes return aus der Lektion Listen und Bedingungen: Mit if (angemeldet) vor dem return des Formulars gibt die Komponente nur die Meldung zurück, und das Formular wird gar nicht gerendert.

Typischer Fehler:

• event.preventDefault; ohne Klammern ruft die Methode nicht auf, die Seite lädt also neu.