События и формы
Тема дорожной карты · React
События и формы — это ключевые элементы для построения интерактивных React-приложений: они охватывают обработку пользовательского ввода через синтетическую систему событий React и управление данными форм. В React элементы форм — <input>, <textarea> и <select> — подключаются к обработчикам событий через JSX-пропсы, такие как onChange, onSubmit и onFocus, которые получают SyntheticEvent при каждом взаимодействии пользователя. Сочетание событий и форм с useState создаёт контролируемые компоненты, где состояние React является единственным источником истины для всех значений полей, что позволяет реализовать валидацию в реальном времени и условную логику UI. Обработчик onSubmit на элементе <form> обычно вызывает event.preventDefault(), чтобы остановить стандартную перезагрузку страницы браузером перед обработкой или отправкой данных формы. Освоение событий и форм в React — обязательное условие для создания форм регистрации, интерфейсов поиска, страниц настроек и любых других функций ввода данных в фронтенд-приложении.
Как это работает
События и формы использует 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.