Klicks verarbeiten

Im JavaScript-Kurs hat ein Button in drei Schritten etwas getan: Du hast ihn mit querySelector() gefunden, eine Funktion geschrieben und sie an addEventListener() übergeben. In React suchst du keine Elemente auf der Seite. Du schreibst den Handler direkt ins JSX, als Attribut des Buttons:

export default function App() {
    function handleHallo() {
        console.log("Hallo vom Festival!");
    }

    return <button onClick={handleHallo}>Hallo sagen</button>;
}

Jeder Klick auf den Button gibt eine Zeile in der Konsole aus:

Hallo vom Festival!

Was hier neu ist:

• onClick ist on und der Name des Ereignisses, in camelCase, wie className. React hat so ein Attribut für jedes Ereignis, das du kennst: onClick, onChange, onSubmit, onKeyDown und weitere.
• Sein Wert steht in geschweiften Klammern, weil er JavaScript ist: die Funktion handleHallo. React merkt sie sich und ruft sie bei jedem Klick auf, wie es addEventListener() getan hat.
• Die Funktion steht in der Komponente, direkt neben dem JSX, zu dem sie gehört. Dort leben Handler in React. Sie können alles benutzen, was die Komponente hat: ihre Variablen, ihre Props und bald ihren State.

Eine Funktion, die ein Ereignis verarbeitet, ist ein Handler, wie im JavaScript-Kurs. In React-Apps beginnt ihr Name meistens mit handle und sagt, was sie verarbeitet: handleClick, handleKaufen, handleAbstimmen. Das ist nur eine Konvention, React kümmert sich nicht um Namen, aber man sieht auf einen Blick, welche Funktionen Handler sind.

Typische Fehler:

• Klammern hinter dem Namen: onClick={handleHallo()}. Damit gibst du React nicht die Funktion. Du rufst sie sofort auf, noch während die Komponente gerendert wird. Das Quiz nach dieser Übung handelt davon.
• onclick in Kleinbuchstaben, wie in HTML. React kennt es nicht, Klicks bewirken also nichts, und eine Warnung in der Konsole sagt, was falsch ist.