Přidávání událostí v JSX

Pojďme se nyní naučit pracovat s událostmi v Reactu. Udělejme například to, aby po kliknutí na blok byl zobrazen alert s určitým textem.

Předpokládejme, že máme funkci showMess, která zobrazí alert se zprávou, a v HTML kódu je tlačítko, na které bychom chtěli kliknout a vidět tento alert:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

Pojďme k našemu tlačítku připojit událost onclick tak, aby po kliknutí na toto div byla spuštěna funkce showMess. K tomu je potřeba přidat atribut onClick (právě v camelCase, tedy onClick, ne onclick), a v něm určit funkci, která se při této události spustí.

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button onClick={showMess}>show</button>
  </div>;
}

Takto probíhá práce s událostmi: přidá se atribut (například onClick nebo onFocus), jako hodnota atributu se určí metoda, která bude při této události volána.

jsxfunction App() {
  function show1() {
    alert(1);
  }
  
  function show2() {
    alert(2);
  }
  
  return <div>
    <button>act1</button>
    <button>act2</button>
  </div>;
}