Pridávanie udalostí v JSX

Poďme si teraz preštudovať prácu s udalosťami v Reacte. Napríklad, urobme tak, aby po kliknutí na blok bol vyvolaný alert s nejakým textom.

Nech máme funkciu showMess, ktorá zobrazí alert so správou, a v HTML kóde je tlačidlo, na ktoré by sme chceli kliknúť a vidieť tento alert:

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

Poďme pripojiť k nášmu tlačidlu udalosť onclick tak, aby po kliknutí na toto div spustila funkcia showMess. Na to je potrebné pridať atribút onClick (práve v camelCase, teda onClick, nie onclick), a v ňom uviesť funkciu, ktorá sa vykoná pri tejto udalosti:

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

Takto prebieha práca s udalosťami: pridá sa atribút (napríklad onClick alebo onFocus), hodnotou atribútu je metóda, ktorá sa zavolá pri tejto udalosti.

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