Додавање догађаја у JSX

Хајде сада да проучимо рад са догађајима у React-у. На пример, хајде да направимо да при клику на блок испише alert са неким текстом.

Претпоставимо да имамо функцију showMess, која исписује alert са поруком, а у HTML коду постоји дугме, на чији клик бисмо желели да видимо тај alert:

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

Хајде да вежемо за наше дугме догађај onclick тако да при клику на овај див се активира функција showMess. За то је потребно додати атрибут onClick (тачно у camelCase, односно onClick, а не onclick), а у њему навести функцију која ће се извршити при том догађају:

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

На тај начин функционише рад са догађајима: додаје се атрибут (на пример, onClick или onFocus), као вредност атрибута наводи се метод који ће бити позван при том догађају.

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