Навешивание событий в 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>;
}