Прикачане на събития в 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>;
}