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

В React обработчики onChange часто используют event.target.name и event.target.value для создания универсальной функции, которая может обрабатывать изменения в нескольких полях формы. Это позволяет избежать дублирования кода: вместо написания отдельного обработчика для каждого input (например, handleNameChange, handleEmailChange), вы пишете один обработчик, который динамически обновляет соответствующее поле в состоянии.

Пример:

JSX
const [form, setForm] = useState({ name: '', email: '' });

const handleChange = (event) => {
  const { name, value } = event.target;
  setForm((prevForm) => ({
    ...prevForm,
    [name]: value,  // динамический ключ
  }));
};

return (
  <>
    <input name="name" value={form.name} onChange={handleChange} />
    <input name="email" value={form.email} onChange={handleChange} />
  </>
);

Здесь event.target.name содержит значение атрибута name из input (например, "name" или "email"), а event.target.value - текущее введённое значение. Используя квадратные скобки [name] в объекте состояния, вы обновляете именно то поле, которое соответствует имени input. Это делает код масштабируемым: добавление нового поля требует лишь добавления соответствующего input с уникальным name и инициализации его в состоянии.