Das Ereignisobjekt

React gibt Handlern das Ereignisobjekt, genau wie der Browser im JavaScript-Kurs. Hat der Handler einen Parameter, bekommt er es:

function handleAntwort(event) {
    console.log(event.target.textContent);
}

return (
    <p>
        <button onClick={handleAntwort}>Ja</button>
        <button onClick={handleAntwort}>Nein</button>
    </p>
);

Ein Klick auf Nein gibt Nein aus. event.target ist das Element, an dem das Ereignis stattgefunden hat, hier der angeklickte Button, ein Handler kann also mehrere Elemente bedienen und sie trotzdem unterscheiden.

Textfelder haben das Ereignis onChange. In React kommt es nach jeder Änderung des Textes, so wie das Ereignis input im JavaScript-Kurs: nach jedem eingegebenen oder gelöschten Buchstaben. (Das change-Ereignis des Browsers wartet, bis du das Feld verlässt. Das onChange von React tut das nicht.) event.target ist dann das Feld, und event.target.value ist das, was darin steht:

<input onChange={(event) => console.log(event.target.value)} />

Dieser Handler ist eine Pfeilfunktion, die direkt im JSX steht. React ruft sie mit dem Ereignisobjekt auf, genau wie eine Funktion mit Namen. Wenn du Eul eintippst, werden drei Zeilen ausgegeben:

E
Eu
Eul

Ein Handler aus einer kurzen Zeile kann so im JSX stehen bleiben. Wird er länger, gib ihm einen Namen und schreibe ihn über das return, wie handleAntwort.

Vorerst geben die Handler nur etwas aus. Um das Getippte auf der Seite zu zeigen, brauchst du State, und der kommt in der nächsten Lektion. Textfelder bekommen danach eine eigene Lektion: Formulare.