Обработка событий в React

В React обработка событий — это механизм, позволяющий компонентам реагировать на действия пользователя: клики, ввод текста, отправку формы, фокус и другие взаимодействия. События в React похожи на события в DOM, но имеют несколько важных отличий.

Синтаксис и соглашения

Имена событий в React пишутся в camelCase, а не в нижнем регистре, как в HTML. Например:

onClick вместо onclick
onChange вместо onchange
onSubmit вместо onsubmit

Обработчик передаётся как функция, а не как строка:

// Правильно
<button onClick={handleClick}>Нажми</button>

// Неправильно
<button onClick={handleClick()}>Нажми</button>

Вызов handleClick() при передаче приведёт к немедленному выполнению функции при каждом рендере, а не при клике.

Типичные события

React поддерживает стандартные события пользовательского взаимодействия:

onClick — нажатие кнопки или другого элемента
onChange — изменение значения в <input>, <select> или <textarea>
onSubmit — отправка формы
onFocus и onBlur — получение и потеря фокуса

Пример обработки отправки формы:

function Form() {
  function handleSubmit(event) {
    event.preventDefault(); // отменяет перезагрузку страницы
    console.log('Форма отправлена');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Отправить</button>
    </form>
  );
}

Объект события

Обработчики получают в качестве аргумента объект события (event). Он содержит информацию о произошедшем действии и методы для управления поведением по умолчанию.

Часто используемые методы:

event.preventDefault() — отменяет стандартное действие (например, отправку формы)
event.stopPropagation() — останавливает всплытие события вверх по дереву DOM

Пример:

function handleClick(event) {
  event.stopPropagation();
  console.log('Клик только на эту кнопку');
}

Важные особенности

Обработчики не вызываются автоматически — они срабатывают только при соответствующем пользовательском действии.
Функция-обработчик должна быть передана, а не вызвана.
Все события в React нормализованы: они работают одинаково во всех браузерах, даже если нативные события отличаются.