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.