Sobes.tech
Back to questions
Middle
2

С Ant Design насколько плотно работал? Сталкивался со сложными формами? Есть интересный кейс: есть Select, в зависимости от выбранного значения добавляются или изменяются input-поля. Как бы ты это реализовал?

Companies where asked
Вбетон

Answer from AI

sobes.tech AI

В Ant Design для реализации динамических форм, где набор input-полей зависит от выбранного значения в Select, можно использовать состояние компонента и условный рендеринг.

Пример подхода:

import React, { useState } from 'react';
import { Form, Select, Input } from 'antd';

const { Option } = Select;

const DynamicForm = () => {
  const [selected, setSelected] = useState(null);

  const onSelectChange = value => {
    setSelected(value);
  };

  return (
    <Form>
      <Form.Item label="Выберите опцию" name="option">
        <Select onChange={onSelectChange} placeholder="Выберите">
          <Option value="a">Опция A</Option>
          <Option value="b">Опция B</Option>
        </Select>
      </Form.Item>

      {selected === 'a' && (
        <Form.Item label="Поле для A" name="fieldA">
          <Input />
        </Form.Item>
      )}

      {selected === 'b' && (
        <>
          <Form.Item label="Поле для B1" name="fieldB1">
            <Input />
          </Form.Item>
          <Form.Item label="Поле для B2" name="fieldB2">
            <Input />
          </Form.Item>
        </>
      )}
    </Form>
  );
};

export default DynamicForm;

Таким образом, при изменении значения Select состояние обновляется, и форма динамически отображает нужные поля. Для более сложных сценариев можно использовать Form.List для динамического добавления полей или управлять формой через Form.useForm.