Додавање на настани во JSX

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

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

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

Ајде да ја поврземе нашата копчка со настанот onclick така што при клик на ова div да се активира функцијата 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>;
}