Dodeljivanje događaja u JSX-u

Hajde sada da istražimo rad sa događajima u React-u. Na primer, hajde da napravimo da klikom na blok iskoči alert sa određenim tekstom.

Neka imamo funkciju showMess, koja prikazuje alert sa porukom, a u HTML kodu postoji dugme, na čiji klik bismo želeli da vidimo taj alert:

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

Hajde da povežemo sa našim dugmetom događaj onclick tako da klikom na ovaj div se poziva funkcija showMess. Za ovo je potrebno dodati atribut onClick (tačno u camelCase-u, odnosno onClick, a ne onclick), a u njemu naznačiti funkciju koja će se izvršiti pri tom događaju:

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

Tako se i odvija rad sa događajima: dodaje se atribut (na primer, onClick ili onFocus), a kao vrednost atributa se navodi metoda koja će biti pozvana pri tom događaju.

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