Dodajanje dogodkov v JSX

Poglejmo si zdaj delo z dogodki v Reactu. Na primer, naredimo tako, da ob kliku na blok izpiše alert z nekim besedilom.

Recimo, da imamo funkcijo showMess, ki izpiše alert s sporočilom, v HTML kodu pa je gumb, ob kliku na katerega želimo videti ta alert:

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

Povežimo naš gumb z dogodkom onclick tako, da ob kliku na ta div se sproži funkcija showMess. Za to je potrebno dodati atribut onClick (prav v camelCase, to je onClick, ne onclick), in v njem določiti funkcijo, ki se bo izvedla ob tem dogodku:

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

Tako poteka delo z dogodki: doda se atribut (na primer onClick ali onFocus), kot vrednost atributa se nastavi metoda, ki bo poklicana ob tem dogodku.

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