Как реализовать форму, в которой в зависимости от выбранного значения в Select добавляются или изменяются другие input-поля?

Question

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

YeaHub · Accepted Answer

Динамические формы с условным рендерингом

Когда нужно, чтобы форма менялась в зависимости от выбора пользователя, используется подход управляемых компонентов и условного рендеринга. Состояние хранит текущее значение select, а на его основе отображаются соответствующие поля ввода.

Пример реализации

Рассмотрим форму, где при выборе 'email' появляется поле для email, а при выборе 'phone' — поле для телефона с маской.

import React, { useState } from 'react';

function DynamicForm() {
  const [contactType, setContactType] = useState('email');
  const [contactValue, setContactValue] = useState('');

  const handleTypeChange = (e) => {
    setContactType(e.target.value);
    setContactValue(''); // сброс значения при смене типа
  };

  return (
    <form>
      <select value={contactType} onChange={handleTypeChange}>
        <option value="email">Email</option>
        <option value="phone">Phone</option>
      </select>
      {contactType === 'email' ? (
        <input
          type="email"
          value={contactValue}
          onChange={(e) => setContactValue(e.target.value)}
          placeholder="Enter email"
        />
      ) : (
        <input
          type="tel"
          value={contactValue}
          onChange={(e) => setContactValue(e.target.value)}
          placeholder="Enter phone"
        />
      )}
    </form>
  );
}

Ключевые моменты

Состояние формы хранится в React-компоненте, что делает его предсказуемым.
При смене select обновляется состояние, и React перерисовывает только изменившиеся части.
Важно сбрасывать зависимые поля при изменении типа, чтобы избежать некорректных данных.

Вывод

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

Как реализовать форму, в которой в зависимости от выбранного значения в Select добавляются или изменяются другие input-поля?

Короткий ответ

Длинный ответ

Динамические формы с условным рендерингом

Пример реализации

Ключевые моменты

Вывод

Как реализовать форму, в которой в зависимости от выбранного значения в Select добавляются или изменяются другие input-поля?

Короткий ответ

Длинный ответ

Динамические формы с условным рендерингом

Пример реализации

Ключевые моменты

Вывод