Навешивание событий в 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), значением атрибута указывается метод, который будет вызван по этому событию.

Параметры в функции
Пусть наша функция showMess параметром принимает имя того, с кем мы хотим поздороваться:

function showMess(name) {
alert('hello, ' + name);
}
Можно передать этот параметр при привязывании функции к событию. Для этого вызов нашей функции следует обернуть в стрелочную функцию:

function App() {
function showMess(name) {
alert('hello, ' + name);
}

return <div>
<button onClick={() => showMess('user')}>show</button>
</div>;
}
Таким образом мы можем привязать одну и ту же функцию к нескольким кнопкам с разными параметрами:

function App() {
function showMess(text) {
alert(text);
}

return <div>
<button onClick={() => showMess('user1')}>show1</button>
<button onClick={() => showMess('user2')}>show2</button>
</div>;
}