React Несколько полей ввода

Управление несколькими полями ввода в формах

Когда у вас в форме несколько контролируемых полей ввода, их состоянием можно управлять двумя основными способами:

1. Отдельным вызовом useState для каждого поля ввода.
2. Одним вызовом useState с объектом, содержащим значения всех полей формы.

Чаще всего используется второй подход, так как он удобнее и компактнее.

Правила:

• Каждое поле ввода должно иметь уникальное значение атрибута name.
• При инициализации состояния используйте объект вместо строки. Если поля ввода не имеют начальных значений, можно использовать пустой объект.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  const [inputs, setInputs] = useState({}); // состояние для всех полей

  const handleChange = (e) => {
    const name = e.target.name; // получаем имя поля
    const value = e.target.value; // получаем значение поля
    setInputs(values => ({
      ...values, // сохраняем предыдущие значения
      [name]: value // добавляем новое значение по имени поля
    }));
  };

  return (
    <form>
      <label>Ваше имя:
        <input 
          type="text" 
          name="firstname" 
          value={inputs.firstname} 
          onChange={handleChange}
        />
      </label>
      <label>Фамилия:
        <input 
          type="text" 
          name="lastname" 
          value={inputs.lastname} 
          onChange={handleChange}
        />
      </label>
      <p>Текущие значения: {inputs.firstname} {inputs.lastname}</p>
    </form>
  );
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

Объяснение примера:

Первое, что бросается в глаза, — при использовании единого вызова useState мы храним начальные значения в объекте. Поскольку у нас пока нет начальных значений, мы используем пустой объект:

const [inputs, setInputs] = useState({});

Далее функция handleChange обновлена для обработки нескольких полей ввода. Внутри неё мы обращаемся к каждому полю ввода через атрибуты e.target.name и e.target.value.

Для обновления состояния используются квадратные скобки [ ], чтобы динамически добавлять свойства объекта:

setInputs(values => ({
  ...values, // сохранение предыдущих значений
  [name]: value // добавление нового значения
}));

При обращении к значениям полей ввода мы ссылаемся на объект состояний inputs, указывая имена полей:

<input 
  type="text" 
  name="firstname" 
  value={inputs.firstname} 
  onChange={handleChange}
/>

Начальные значения

Чтобы задать начальные значения для полей ввода, заполните объект в вызове useState соответствующими ключами и значениями:

function MyForm() {
  const [inputs, setInputs] = useState({
    firstname: 'Иван',
    lastname: 'Петров'
  });

  ...