React События

Подобно событиям в HTML DOM, React позволяет реагировать на действия пользователей.

React позволяет взаимодействовать с теми же событиями, что и в HTML: click, change, mouseover и другие.

Добавление событий

События в React записываются в стиле CamelCase:

Вместо onclick используется onClick.

Обработчики событий в React задаются внутри фигурных скобок:

Вместо onclick="shoot()" используем onClick={shoot}.

Пример

Запись обработчика события клика на кнопке в React:


<button onClick={shoot}>Бей!</button>

Аналогичный код в HTML выглядел бы так:


<button onclick="shoot()">Бей!</button>

Теперь поместим саму функцию обработки события shoot внутрь компонента Football:


function Football() {
  const shoot = () => {
    alert("Великолепный удар!");
  };

  return (
    <button onClick={shoot}>Бей!</button>
  );
}

createRoot(document.getElementById('root')).render(
  <Football />
);

Передача аргументов обработчику событий

Чтобы передать аргумент обработчику события, воспользуйтесь стрелочной функцией.

Пример

Передадим строку "Гол!" в функцию-обработчик shoot:


function Football() {
  const shoot = (a) => {
    alert(a);
  };

  return (
    <button onClick={() => shoot("Гол!")}>Бей!</button>
  );
}

createRoot(document.getElementById('root')).render(
  <Football />
);

Доступ к объекту события React

Обработчикам событий доступен объект события React, вызвавший выполнение функции.

Например, в нашем случае событие — это клик мыши (click).

Пример

Передача объекта события вручную через стрелочную функцию:


function Football() {
  const shoot = (a, b) => {
    alert(b.type); /* Здесь 'b' — это объект события React, вызванный событием 'click'. */
  };

  return (
    <button onClick={(event) => shoot("Гол!", event)}>Бей!</button>
  );
}

createRoot(document.getElementById('root')).render(
  <Football />
);

Эта возможность пригодится нам позже, когда будем рассматривать формы в отдельной главе.