Зачем в обработчике onChange использовать event.target.name и event.target.value

Что проверяют

Понимаете ли вы, как устроены управляемые формы в React и зачем нужен один обработчик на все поля. Следом обычно спрашивают про чекбоксы и числа, про функциональное обновление состояния и про разницу между target и currentTarget.

Как отвечать

Смысл в том, что один handleChange обслуживает любое количество полей. event.target это элемент, на котором произошло событие: name говорит, какое поле изменилось, value даёт новое значение. Имя поля становится вычисляемым ключом объекта:

const { name, value } = e.target; setForm(prev => ({ ...prev, [name]: value }));

Что важно добавить:

• атрибут name совпадает с ключом состояния: опечатка не даст ошибки, а молча создаст новый ключ, и поле перестанет обновляться;
• функциональное обновление: prev => ... вместо ...form из замыкания, иначе при нескольких обновлениях подряд одно затрёт другое;
• не всё берётся из value: у чекбокса нужен checked (value у него по умолчанию строка "on"), у type="number" значение приходит строкой, число даёт valueAsNumber, у файлов читают files;
• onChange в React срабатывает на каждое изменение ввода, как нативное событие input, а не только при потере фокуса, как нативный change;
• target и currentTarget: первый это элемент, где событие возникло, второй тот, на котором висит обработчик. У одиночного input они совпадают, при делегировании на обёртке различаются.

Покажите, что знаете альтернативы. Для больших форм берут React Hook Form: он работает на неуправляемых полях и тоже опирается на name через register. В React 19 форма может отправляться через action, а значения читаются из FormData по тем же именам, без состояния на каждое поле.

Где спотыкаются

Пишут отдельный обработчик и отдельный useState на каждое поле. На форме из десяти полей это десять почти одинаковых функций.

Забывают про чекбоксы и числа, и в состоянии оказывается "on" вместо true или строка "42" там, где ожидалось число.

Пересказывают устаревший совет вызывать e.persist(). Пул синтетических событий убрали в React 17, и поля события больше не обнуляются после выхода из обработчика.