Обработчики событий
Тема дорожной карты · React
Обработчики событий в React — это функции, передаваемые как пропсы JSX-элементам для реагирования на взаимодействия пользователя: клики, нажатия клавиш, отправку форм и движения мыши. В отличие от обычных DOM-слушателей событий, синтетическая система событий React нормализует различия между браузерами и оборачивает нативные события в объект SyntheticEvent, предоставляющий согласованный кросс-браузерный API. Пропсы обработчиков событий следуют соглашению camelCase в JSX — onClick, onChange, onSubmit, onKeyDown — а функция-обработчик получает синтетическое событие в качестве аргумента. React-разработчики обычно определяют обработчики событий инлайн как стрелочные функции или как именованные функции в теле компонента, при необходимости используя useCallback для их мемоизации при передаче оптимизированным дочерним компонентам. Понимание обработчиков событий — это основа для построения интерактивных React-интерфейсов: от простых кликов по кнопкам до сложных взаимодействий с формами и drag-and-drop.
Как это работает
Обработчики событий использует camelCase event props (onClick, onChange, onSubmit), получающие SyntheticEvent — кроссбраузерную обёртку React над нативным событием. Для форм: "controlled"-компоненты держат значение input в state и ререндерятся на change; "uncontrolled" читают значение через ref при необходимости. useRef возвращает мутируемый контейнер (.current), переживающий рендеры без триггера ререндера — полезно для DOM-узлов и uncontrolled-инпутов.
Когда применять
Controlled-формы — когда (а) нужна валидация по мере ввода, (б) UI зависит от form state (live preview, условные поля), (в) сабмит через fetch с полным контролем. Uncontrolled — когда форма большая + простая (DOM хранит значения, читаете через FormData на сабмит). Для нетривиальных форм — react-hook-form: избегает ререндера на каждое нажатие в полностью controlled-формах.
Типичные ошибки
Ловушки Обработчики событий: забытый preventDefault() на сабмите формы — браузер перезагружается; бинд событий на элементах, которые их не генерируют (onClick на <div> без keyboard support = недоступно); хранение каждого нажатия в state на 50-полевой форме (rerender-шторм); использование ref.current внутри render (refs не реактивны — изменения не триггерят ререндер). useRef — escape hatch, не обычный state.