React Formulare: Inputs, Checkboxen, Select, Validierung

Ein React-Formular hält den Wert jedes Felds im State: Das Input zeigt value={state} und aktualisiert ihn mit onChange. Wenn jemand absendet, ruft ein onSubmit-Handler e.preventDefault() auf, um das Neuladen der Seite zu stoppen, und nutzt dann die Werte, die schon im State stehen.

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [greeting, setGreeting] = useState('');

    function handleSubmit(e) {
        e.preventDefault();
        setGreeting(`Hello, ${name || 'stranger'}!`);
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name{' '}
                <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
            </label>{' '}
            <button type="submit">Say hello</button>
            <p>{greeting}</p>
        </form>
    );
}

Tippe einen Namen und drück Enter oder klicke auf den Button. Lösch dann die Zeile e.preventDefault();: Die Vorschau zeigt die Felder, die der Browser bei einem nativen Absenden geschickt hätte, was eine echte Seite außerdem neu laden würde.

Ein Input, dessen Wert aus dem State kommt, heißt kontrolliertes Input. Die Alternative, den Wert dem DOM zu überlassen und ihn später zu lesen, wird unter kontrollierte vs. unkontrollierte Komponenten behandelt.

Text-Inputs und textarea

Jedes Textfeld funktioniert gleich: value aus dem State, onChange liest e.target.value. Eine <textarea> folgt demselben Muster. In HTML steht ihr Text zwischen den Tags, in React übergibst du ihn als value.

import { useState } from 'react';

export default function App() {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 320 }}>
            <input
                value={title}
                onChange={(e) => setTitle(e.target.value.toUpperCase())}
                placeholder="Title (shouts)"
            />
            <textarea
                value={body}
                onChange={(e) => setBody(e.target.value)}
                rows={4}
                maxLength={140}
                placeholder="Up to 140 characters"
            />
            <small>{140 - body.length} characters left</small>
        </div>
    );
}

Weil du den Wert selbst setzt, kannst du ändern, was getippt wurde, bevor es erscheint: Das Titelfeld macht aus jedem Buchstaben einen Großbuchstaben. Der Zeichenzähler aktualisiert sich bei jedem Tastendruck, weil body State ist und jede Änderung erneut rendert.

Select

Ein <select> nimmt value am select-Element selbst an, nicht selected an einer Option. e.target.value ist der value der gewählten Option.

import { useState } from 'react';

export default function App() {
    const [plan, setPlan] = useState('monthly');
    const prices = { monthly: '$12 a month', yearly: '$99 a year', free: '$0' };

    return (
        <div>
            <select value={plan} onChange={(e) => setPlan(e.target.value)}>
                <option value="free">Free</option>
                <option value="monthly">Monthly</option>
                <option value="yearly">Yearly</option>
            </select>
            <p>You pay {prices[plan]}.</p>
        </div>
    );
}

Für eine Mehrfachauswahl fügst du multiple hinzu und übergibst ein Array als value. Lies die Auswahl mit Array.from(e.target.selectedOptions, (o) => o.value).

Checkbox und Radio-Buttons

Eine Checkbox wird mit checked kontrolliert, nicht mit value, und ihr Handler liest e.target.checked, das true oder false ist. Radio-Buttons einer Gruppe teilen sich einen name; jeder ist angehakt, wenn der State seinem Wert entspricht.

import { useState } from 'react';

export default function App() {
    const [newsletter, setNewsletter] = useState(false);
    const [size, setSize] = useState('m');

    return (
        <div>
            <label>
                <input
                    type="checkbox"
                    checked={newsletter}
                    onChange={(e) => setNewsletter(e.target.checked)}
                />
                Send me the newsletter
            </label>

            <p>Shirt size:</p>
            {['s', 'm', 'l'].map((s) => (
                <label key={s} style={{ marginInlineEnd: 12 }}>
                    <input
                        type="radio"
                        name="size"
                        value={s}
                        checked={size === s}
                        onChange={(e) => setSize(e.target.value)}
                    />
                    {s.toUpperCase()}
                </label>
            ))}

            <p>
                Size {size.toUpperCase()}, newsletter {newsletter ? 'on' : 'off'}.
            </p>
        </div>
    );
}

e.target.value an einer Checkbox zu lesen ist ein häufiger Fehler: Bei einer Checkbox ohne value-Attribut gibt es den String "on" zurück, egal ob das Kästchen angehakt ist oder nicht.

Ein State-Objekt für viele Felder

Ein Formular mit zehn Feldern braucht keine zehn useState-Aufrufe und zehn Handler. Halte ein Objekt, gib jedem Input einen name, der zu einem Schlüssel passt, und schreibe einen Handler, der den Namen als berechneten Schlüssel nutzt: [e.target.name].

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({
        email: '',
        country: 'NO',
        terms: false,
    });

    function handleChange(e) {
        const { name, type, value, checked } = e.target;
        setForm({ ...form, [name]: type === 'checkbox' ? checked : value });
    }

    return (
        <div style={{ display: 'grid', gap: 8, maxWidth: 280 }}>
            <input name="email" value={form.email} onChange={handleChange} placeholder="Email" />
            <select name="country" value={form.country} onChange={handleChange}>
                <option value="NO">Norway</option>
                <option value="JP">Japan</option>
                <option value="BR">Brazil</option>
            </select>
            <label>
                <input name="terms" type="checkbox" checked={form.terms} onChange={handleChange} />
                I accept the terms
            </label>
            <pre>{JSON.stringify(form, null, 2)}</pre>
        </div>
    );
}

Der Handler prüft den Input-Typ, damit die Checkbox einen Boolean speichert und die anderen Text. Ein Feld fügst du hinzu, indem du dem Startobjekt einen Schlüssel und ein Input mit demselben name gibst; der Handler muss sich nicht ändern. Der Spread behält jedes andere Feld (siehe Arrays und Objekte aktualisieren).

Ein Formular absenden

Setze die Submit-Logik auf das onSubmit des Formulars, nicht auf das onClick des Buttons. onSubmit feuert auch, wenn jemand in einem Textfeld Enter drückt, was ein Klick-Handler verpassen würde. Ein <button> in einem Formular ist standardmäßig ein Submit-Button; gib anderen Buttons type="button", damit sie nicht absenden.

import { useState } from 'react';

export default function App() {
    const [form, setForm] = useState({ user: 'ada', password: '' });

    function handleChange(e) {
        setForm({ ...form, [e.target.name]: e.target.value });
    }

    function handleSubmit(e) {
        e.preventDefault();
        console.log('submitting', form);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input name="user" value={form.user} onChange={handleChange} />{' '}
            <input name="password" type="password" value={form.password} onChange={handleChange} />{' '}
            <button type="button" onClick={() => setForm({ user: '', password: '' })}>
                Clear
            </button>{' '}
            <button type="submit">Log in</button>
        </form>
    );
}

Öffne die Konsole, tippe ein Passwort und drück Enter: Das Formular loggt das ganze Objekt. Ein Klick auf „Clear“ loggt nichts, weil es type="button" ist. Entferne dieses Attribut, und Clear sendet ebenfalls ab.

Validierung und Fehler anzeigen

Einfache Validierung ist eine Funktion, die die Werte nimmt und ein Objekt mit Meldungen zurückgibt. Führe sie beim Absenden aus, speichere das Ergebnis im State und zeige jede Meldung unter ihrem Feld. Deaktiviere den Submit-Button, solange eine Anfrage läuft, damit ein Doppelklick das Formular nicht zweimal sendet.

import { useState } from 'react';

function validate({ email, age }) {
    const errors = {};
    if (!email.includes('@')) errors.email = 'Enter a valid email.';
    if (!age || Number(age) < 13) errors.age = 'You must be 13 or older.';
    return errors;
}

function saveProfile(data) {
    return new Promise((resolve) => setTimeout(() => resolve(data), 800));
}

export default function App() {
    const [form, setForm] = useState({ email: '', age: '' });
    const [errors, setErrors] = useState({});
    const [status, setStatus] = useState('idle');

    async function handleSubmit(e) {
        e.preventDefault();
        const found = validate(form);
        setErrors(found);
        if (Object.keys(found).length > 0) return;
        setStatus('saving');
        await saveProfile(form);
        setStatus('saved');
    }

    const change = (e) => setForm({ ...form, [e.target.name]: e.target.value });
    const error = { color: 'crimson', margin: '4px 0 8px', fontSize: 13 };

    return (
        <form onSubmit={handleSubmit} noValidate>
            <input name="email" value={form.email} onChange={change} placeholder="Email" />
            {errors.email && <p style={error}>{errors.email}</p>}
            <input name="age" type="number" value={form.age} onChange={change} placeholder="Age" />
            {errors.age && <p style={error}>{errors.age}</p>}
            <div style={{ marginTop: 8 }}>
                <button disabled={status === 'saving'}>
                    {status === 'saving' ? 'Saving...' : 'Save'}
                </button>
                {status === 'saved' && ' Saved.'}
            </div>
        </form>
    );
}

Klicke bei leeren Feldern auf Save, um beide Meldungen zu sehen, und füll sie dann aus. saveProfile steht für eine echte Anfrage: Es wartet 800 Millisekunden und wird dann aufgelöst. Das Attribut noValidate schaltet die eigenen Validierungsblasen des Browsers ab, damit nur deine Meldungen erscheinen; entferne es und füge einem Input required hinzu, um zu vergleichen.

Fehler können auch beim Rendern berechnet statt gespeichert werden, zum Beispiel const emailError = form.email && !form.email.includes('@'), was die Meldung schon beim Tippen zeigt. Wähle den Zeitpunkt, der zum Formular passt: beim Absenden ist ruhiger, beim Tippen gibt schnelleres Feedback.

Form Actions in React 19

React 19 bringt einen weiteren Weg, ein Formular zu verarbeiten. Übergib der Prop action des Formulars eine Funktion. React verhindert für dich das Neuladen der Seite und ruft die Funktion mit einem FormData-Objekt auf, das jedes Feld mit einem name enthält. Die Felder brauchen gar keinen State: Sie sind unkontrolliert, und React leert sie, nachdem die Action fertig ist.

import { useState } from 'react';

function addComment(text) {
    return new Promise((resolve) => setTimeout(() => resolve(text), 500));
}

export default function App() {
    const [comments, setComments] = useState([]);

    async function postComment(formData) {
        const text = formData.get('comment');
        console.log('action received', text);
        const saved = await addComment(text);
        setComments((list) => [...list, saved]);
    }

    return (
        <form action={postComment}>
            <input name="comment" defaultValue="Nice docs" />{' '}
            <button type="submit">Post</button>
            <ul>
                {comments.map((c, i) => (
                    <li key={i}>{c}</li>
                ))}
            </ul>
        </form>
    );
}

Tippe deinen eigenen Kommentar und poste ihn. Die Liste zeigt deinen Text, und das Input springt zurück auf Nice docs: Nachdem die Action aufgelöst ist, setzt React unkontrollierte Felder auf ihren defaultValue zurück. Die Action kann async sein, und während sie läuft, behandelt React das Update als Transition.

Um einen Pending-Zustand oder einen Fehler aus der Action anzuzeigen, umschließe sie mit useActionState, das das neueste Ergebnis, eine umhüllte Action für das Formular und ein Flag isPending zurückgibt. Ein Button tief im Formular kann den Pending-Zustand auch mit useFormStatus aus react-dom lesen:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
    const { pending } = useFormStatus();
    return <button disabled={pending}>{pending ? 'Posting...' : 'Post'}</button>;
}

useFormStatus ist in den Editoren hier nicht geladen, deshalb erscheint es nur in diesem statischen Block. Es muss in einer Komponente aufgerufen werden, die innerhalb des <form> gerendert wird, nicht in der Komponente, die das Formular rendert.

Kontrollierter State mit onSubmit und Form Actions mit FormData funktionieren in React 19 beide. Kontrollierte Felder passen zu Formularen, die schon beim Tippen reagieren (Live-Validierung, ein Zeichenzähler, voneinander abhängige Felder). Actions passen zu Formularen, bei denen du die Werte erst beim Absenden brauchst.