Obsluha kliknutí

V kurzu JavaScriptu tlačítko něco dělalo na tři kroky: našli jste ho pomocí querySelector(), napsali funkci a předali ji metodě addEventListener(). V Reactu prvky na stránce nehledáte. Obsluhu napíšete rovnou do JSX jako atribut tlačítka:

export default function App() {
    function pozdrav() {
        console.log("Zdravíme z festivalu!");
    }

    return <button onClick={pozdrav}>Pozdravit</button>;
}

Každé kliknutí na tlačítko vypíše do konzole řádek:

Zdravíme z festivalu!

Co je tu nového:

• onClick je on a název události, psaný stylem camelCase jako className. React má takový atribut pro každou událost, kterou znáte: onClick, onChange, onSubmit, onKeyDown a další.
• Jeho hodnota je ve složených závorkách, protože je to JavaScript: funkce pozdrav. React si ji uloží a při každém kliknutí ji zavolá, stejně jako to dělal addEventListener().
• Funkce je uvnitř komponenty, hned vedle JSX, ke kterému patří. Tam mají obsluhy v Reactu své místo. Můžou proto používat všechno, co komponenta má: její proměnné, props a brzy i stav.

Funkce, která obsluhuje událost, je obsluha události, krátce obsluha, stejně jako v kurzu JavaScriptu. V anglicky psaných aplikacích začíná její název obvykle slovem handle (obsloužit) a říká, co obsluhuje: handleClick, handleBuy. V tomto kurzu dáme obsluhám česká slovesa, která říkají, co dělají: pozdrav, kupVstupenky, hlasuj. Obojí je jen zvyklost, Reactu na názvech nezáleží.

Typické chyby:

• Závorky za názvem: onClick={pozdrav()}. Tím React funkci nedostane. Funkce se zavolá hned, už když se komponenta vykresluje. O tom je kvíz za tímto cvičením.
• onclick malými písmeny jako v HTML. React ho nezná, takže kliknutí nic neudělá a v konzoli se objeví varování, co je špatně.