Sündmuste lisamine JSX-s

Uurime nüüd sündmustega töötamist Reactis. Teeme näiteks nii, et klõpsates blokil kuvataks alert mingi tekstiga.

Olgem, et meil on funktsioon showMess, mis kuvab alert teatega, ja HTML koodis on nupp, millele klõpsates me tahaksime näha seda alert't:

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

Seome oma nupuga sündmuse onclick nii, et sellele divile klõpsates käivitub funktsioon showMess. Selleks tuleb lisada atribuut onClick (täpselt camelCase'is, st onClick, mitte onclick), ja selles määrata funktsioon, mis käivitatakse selle sündmuse korral:

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

Nii toimubki sündmustega töötamine: lisatakse atribuut (näiteks onClick või onFocus), atribuudi väärtuseks määratakse meetod, mis kutsutakse selle sündmuse korral välja.

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