Objekt události

React předává obsluhám objekt události, stejně jako to v kurzu JavaScriptu dělal prohlížeč. Když má obsluha parametr, dostane ho:

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

return (
    <p>
        <button onClick={odpovez}>Ano</button>
        <button onClick={odpovez}>Ne</button>
    </p>
);

Kliknutí na Ne vypíše Ne. event.target je prvek, ve kterém se událost stala, tady tlačítko, na které se kliklo. Jedna obsluha tak může sloužit víc prvkům a pořád je rozliší.

Textová pole mají událost onChange. V Reactu přijde po každé změně textu, jako v kurzu JavaScriptu událost input: po každém napsaném nebo smazaném písmenu. (Událost change prohlížeče čeká, až textové pole opustíte. onChange v Reactu nečeká.) event.target je pak samo textové pole a event.target.value to, co v něm je:

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

Tahle obsluha je šipková funkce napsaná přímo v JSX. React ji zavolá s objektem události, stejně jako by zavolal pojmenovanou funkci. Když napíšete Sova, vypíšou se čtyři řádky:

S
So
Sov
Sova

Obsluha na jeden krátký řádek může takhle zůstat v JSX. Jakmile je delší, pojmenujte ji a napište ji nad return, jako je napsaná odpovez.

Zatím obsluhy jen vypisují. Aby se napsaný text ukázal na stránce, je potřeba stav, a ten je hned v další lekci. Textová pole pak dostanou vlastní lekci, Formuláře.