React Events: onClick, onChange, onSubmit und mehr

React behandelt Events mit Props, die nach dem Event in camelCase benannt sind, etwa onClick, onChange und onSubmit. Du übergibst eine Funktion, und React ruft sie mit einem Event-Objekt auf, wenn jemand klickt, tippt oder absendet.

import { useState } from 'react';

export default function App() {
    const [likes, setLikes] = useState(0);

    function handleClick() {
        setLikes(likes + 1);
        console.log('Liked');
    }

    return <button onClick={handleClick}>Like ({likes})</button>;
}

Jeder Klick führt handleClick aus, das den Zähler aktualisiert und in die Konsole unter der Vorschau loggt. Probiere onDoubleClick anstelle von onClick: Jetzt zählt nur ein Doppelklick.

Übergib die Funktion, ruf sie nicht auf

Die Prop nimmt eine Funktion an, und React ruft sie später auf. Ein sehr häufiger Fehler ist, Klammern hinzuzufügen. Dann wird die Funktion sofort aufgerufen, beim Rendern, und React bekommt stattdessen ihren Rückgabewert.

function sayHi(name) {
    console.log('Hi, ' + name);
}

export default function App() {
    return (
        <div>
            <button onClick={sayHi('during render')}>Wrong</button>{' '}
            <button onClick={() => sayHi('Ada')}>Right</button>
        </div>
    );
}

Die Konsole zeigt „Hi, during render“, bevor du irgendetwas anfasst: React hat sayHi beim Rendern des ersten Buttons ausgeführt, und weil sayHi undefined zurückgibt, hat dieser Button gar keinen Handler. Ein Klick auf Wrong bewirkt nichts. Ein Klick auf Right loggt „Hi, Ada“, weil die Arrow Function erst beim Klick läuft.

Die Arrow Function ist auch der Weg, Argumente zu übergeben. onClick={() => removeItem(item.id)} erzeugt für jeden Eintrag eine kleine Funktion, die deine mit der richtigen ID aufruft. Wenn ein Handler keine Argumente braucht, übergib ihn per Namen: onClick={handleClick}.

Bei einem State-Setter ist der Fehler schlimmer: onClick={setCount(count + 1)} setzt State beim Rendern, was erneut rendert, was erneut State setzt, und React stoppt mit „Too many re-renders“.

Das Event-Objekt

React übergibt jedem Handler ein Argument, das Event-Objekt. Es hat dieselben Eigenschaften wie das Event des Browsers: e.target ist das Element, an dem das Event passiert ist, e.key ist die gedrückte Taste, e.preventDefault() bricht die Standardaktion des Browsers ab. React umhüllt das native Event mit einem sogenannten Synthetic Event, damit es sich in jedem Browser gleich verhält; das Original liegt unter e.nativeEvent, falls du es je brauchst.

Die zwei, die du am meisten nutzt, sind e.target.value in onChange und e.key in onKeyDown.

import { useState } from 'react';

export default function App() {
    const [text, setText] = useState('');
    const [tags, setTags] = useState(['react']);

    function handleKeyDown(e) {
        console.log('key:', e.key);
        if (e.key === 'Enter' && text.trim() !== '') {
            setTags([...tags, text.trim()]);
            setText('');
        }
        if (e.key === 'Escape') {
            setText('');
        }
    }

    return (
        <div>
            <input
                value={text}
                onChange={(e) => setText(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder="Type a tag, press Enter"
            />
            <p>Tags: {tags.join(', ')}</p>
        </div>
    );
}

Tippe hooks und drück Enter: Der Tag wird hinzugefügt und das Feld geleert. Die Konsole loggt jede Taste, auch Shift, Backspace und Enter, mit den Namen aus e.key. Drück Escape mitten in einem Wort, um es zu verwerfen.

onChange in React feuert bei jedem Tastendruck. In reinem HTML feuert das change-Event eines Textfelds erst, wenn es den Fokus verliert, das ist also ein bewusster Unterschied: So bleiben Eingabefeld und State Buchstabe für Buchstabe im Gleichschritt. Checkboxen geben dir e.target.checked statt value. Die Seite zu Formularen behandelt jeden Eingabetyp.

Formulare und preventDefault

Wenn ein Formular abgesendet wird, ist die Standardaktion des Browsers, es zu senden und eine neue Seite zu laden. In einer React-App willst du die Daten fast immer selbst verarbeiten, also beginnt der Submit-Handler mit e.preventDefault().

import { useState } from 'react';

export default function App() {
    const [email, setEmail] = useState('');
    const [sent, setSent] = useState(null);

    function handleSubmit(e) {
        e.preventDefault();
        console.log('Subscribing', email);
        setSent(email);
        setEmail('');
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                name="email"
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@example.com"
            />{' '}
            <button type="submit">Subscribe</button>
            {sent && <p>Thanks, {sent} is on the list.</p>}
        </form>
    );
}

Setze onSubmit auf das <form>, nicht onClick auf den Button: Dann sendet auch Enter im Feld das Formular ab, und die eigenen Prüfungen des Browsers (hier required und type="email") laufen zuerst. Lösch die Zeile e.preventDefault() und sende erneut ab: Eine echte Seite würde jetzt zu einer neuen Seite wechseln und die Dankesnachricht verlieren. Die Vorschau blockiert das und zeigt stattdessen, was das Formular senden würde, email= ohne Wert, weil setEmail('') das Feld schon geleert hatte, als das Formular gelesen wurde.

In React 19 kannst du außerdem eine Funktion an <form action={fn}> übergeben, die die Formulardaten erhält und unkontrollierte Felder für dich zurücksetzt. Die Seite zu Formularen zeigt beide Stile.

Bubbling und stopPropagation

Die meisten Events steigen auf (Bubbling): Nachdem sie am angeklickten Element gelaufen sind, laufen sie an seinem Elternelement, dann an dessen Elternelement, bis ganz nach oben. React-Handler folgen derselben Reihenfolge. Deshalb zählt ein Klick auf einen Button in einer anklickbaren Karte auch als Klick auf die Karte.

const box = { padding: 12, border: '1px solid #bbb', borderRadius: 6, marginTop: 8 };

export default function App() {
    return (
        <div style={box} onClick={() => console.log('3. outer card')}>
            Outer card
            <div style={box} onClick={() => console.log('2. inner panel')}>
                Inner panel
                <div style={{ marginTop: 8 }}>
                    <button onClick={() => console.log('1. button')}>Bubbles up</button>{' '}
                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            console.log('1. button that stops here');
                        }}
                    >
                        Stops here
                    </button>
                </div>
            </div>
        </div>
    );
}

Klicke auf Bubbles up, und die Konsole loggt den Button, dann das innere Panel, dann die äußere Karte. Klicke auf Stops here, und nur der Button loggt: e.stopPropagation() beendet den Aufstieg. Ein Klick auf den Text des inneren Panels selbst loggt das Panel und die Karte.

Nutze stopPropagation sparsam. Ein häufiger berechtigter Fall ist ein Löschen-Button in einer anklickbaren Listenzeile, wo ein Klick auf Löschen nicht auch die Zeile öffnen soll. Wenn ein Elternteil wissen muss, ob der Klick von einem Kind kam, prüfe e.target, statt das Event zu stoppen. Um einen Handler auf dem Weg nach unten auszuführen, bevor Kinder das Event sehen, bietet React Capture-Versionen wie onClickCapture.

preventDefault und stopPropagation sind verschiedene Werkzeuge. Das erste bricht ab, was der Browser tun würde (einem Link folgen, ein Formular absenden, eine Checkbox anhaken). Das zweite verhindert, dass andere Handler von dem Event erfahren. Das eine aufzurufen bewirkt nicht das andere.

Weitere häufige Events

Dasselbe Muster gilt für jedes Event, das React unterstützt. Einige, die du oft nutzen wirst:

• onFocus und onBlur feuern, wenn ein Eingabefeld den Fokus bekommt und verliert, praktisch, um eine Validierung anzuzeigen, nachdem jemand ein Feld verlassen hat.
• onMouseEnter und onMouseLeave feuern, wenn der Zeiger ein Element betritt und verlässt. Anders als die meisten Events steigen sie nicht auf, also feuert das onMouseEnter des Elternelements nicht erneut, wenn der Zeiger vom Elternelement in sein Kind wandert.
• onPointerDown, onPointerMove und onPointerUp funktionieren gleichermaßen für Maus, Touch und Stift, was sie zur besseren Wahl fürs Ziehen macht.
• onScroll feuert, während ein Element scrollt. In React steigt es nicht auf.

Jeder Handler erhält ein Event-Objekt mit den Eigenschaften, die für ihn sinnvoll sind: e.clientX für Pointer-Events, e.key für Tastatur-Events, e.target für alle.

Handler als Props übergeben

Komponenten können Handler von ihrem Elternteil wie jede andere Prop annehmen. Benenne sie nach dem, was passiert ist, onSomething, und die Funktion, die es behandelt, handleSomething. Das spiegelt die eingebauten Events und macht offensichtlich, welche Props Callbacks sind.

import { useState } from 'react';

function Stepper({ value, onIncrement, onDecrement }) {
    return (
        <span>
            <button onClick={onDecrement}>-</button>
            <b style={{ margin: '0 8px' }}>{value}</b>
            <button onClick={onIncrement}>+</button>
        </span>
    );
}

export default function App() {
    const [qty, setQty] = useState(1);

    function handleIncrement() {
        setQty(qty + 1);
    }
    function handleDecrement() {
        setQty(Math.max(0, qty - 1));
    }

    return (
        <p>
            Quantity: <Stepper value={qty} onIncrement={handleIncrement} onDecrement={handleDecrement} />
        </p>
    );
}

Stepper besitzt die Zahl nicht; er meldet Klicks, und das Elternteil entscheidet, was sie bedeuten. Ändere handleDecrement so, dass es bei 1 statt bei 0 stoppt, und der Stepper folgt, ohne dass du ihn bearbeitest. State im Elternteil zu halten und Handler nach unten zu reichen ist das Muster, das unter State nach oben verlagern beschrieben wird.

Eigene Handler-Props sind nur Namen. onIncrement an deiner eigenen Komponente bewirkt nichts, bis die Komponente es an das onClick eines echten Elements weitergibt, und du kannst ihm beliebige Argumente geben, zum Beispiel onSelect(item.id).