# Навешивание событий в JSX

Давайте теперь изучим работу с событиями на React. К примеру, сделаем так, чтобы по клику на блок выводился алерт с некоторым текстом.

Пусть у нас есть функция `showMess`, которая выводит алерт с сообщением, а в HTML коде есть кнопка, по клику на которую нам и хотелось бы видеть этот алерт:

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

Давайте привяжем к нашей кнопке событие `onclick` так, чтобы по клику на этот див срабатывала функция `showMess`. Для этого нужно добавить атрибут `onClick` (именно в camelCase, то есть `onClick`, а не `onclick`), а в нем указать функцию, которая выполнится по этому событию:

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

Таким образом и происходит работа с событиями: добавляется атрибут (к примеру, `onClick` или `onFocus`), значением атрибута указывается метод, который будет вызван по этому событию.

Дан следующий код:

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

Сделайте так, чтобы по клику на первую кнопку срабатывала первая функция, а по клику на вторую кнопку - вторая функция.

←→
↑