Események hozzárendelése JSX-ben

Most tanulmányozzuk az eseménykezelést Reactban. Például tegyük úgy, hogy egy blokkra kattintva egy alert jelenjen meg valamilyen szöveggel.

Tegyük fel, hogy van egy showMess függvényünk, amely egy alert-et jelenít meg egy üzenettel, és a HTML kódban van egy gomb, amelyre kattintva szeretnénk látni ezt a alert-et:

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

Rendeljük hozzá a gombunkhoz az onclick eseményt úgy, hogy erre a div-re kattintva a showMess függvény aktiválódjon. Ehhez hozzá kell adni az onClick attribútumot (éppen camelCase-ben, azaz onClick, nem pedig onclick), és meg kell adni benne azt a függvényt, amely lefut az esemény bekövetkeztekor:

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

Így működik az eseménykezelés: hozzáadunk egy attribútumot (például onClick vagy onFocus), az attribútum értékeként pedig megadjuk azt a metódust, amely az esemény bekövetkeztekor meghívásra kerül.

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