Как реализовать контролируемую форму с несколькими полями ввода?

Что такое контролируемая форма?

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

Реализация с несколькими полями

Для нескольких полей удобно использовать объект в состоянии, где ключи соответствуют именам полей. Обработчик onChange использует атрибут name поля для динамического обновления состояния.

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" value={formData.username} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
      <input name="password" type="password" value={formData.password} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

Преимущества и применение

• Простая валидация: можно проверять данные при каждом изменении.
• Легко отправлять данные на сервер: состояние уже содержит все значения.
• Удобно для динамических форм, где количество полей может меняться.

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