import { Form, Input, Button, Space, Select } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
const { Option } = Select;
const areas = [
{ label: 'Beijing', value: 'Beijing' },
{ label: 'Shanghai', value: 'Shanghai' },
];
const sights = {
Beijing: ['Tiananmen', 'Great Wall'],
Shanghai: ['Oriental Pearl', 'The Bund'],
};
const Test: React.FC<any> = (props) => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Received values of form:', values);
};
const handleChange = () => {
form.setFieldsValue({ sights: [] });
};
return (
<Form form={form} name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
<Form.Item name="area" label="Area" rules={[{ required: true, message: 'Missing area' }]}>
<Select options={areas} onChange={handleChange} />
</Form.Item>
<Form.List
name="sights"
initialValue={[
{
test: [
{
price: '',
name: '',
},
{
price: '',
name: '',
},
],
},
]}
>
{(fields, { add, remove }) => (
<>
{fields.map((field) => (
<Space key={field.key} align="baseline">
<Form.List
{...field}
label="父"
name={[field.name, 'test']}
fieldKey={[field.fieldKey, 'test']}
initialValue={[
{
price: '',
},
{
name: '',
},
]}
>
{(testList, { add: addtest, remove: removetest }) => (
<>
{testList.map((testItem) => {
console.log(testItem);
return (
<Space key={testItem.key} align="baseline">
<Form.Item
{...testItem}
label="Price"
name={[testItem.name, 'price']}
fieldKey={[testItem.fieldKey, 'price']}
rules={[{ required: true, message: 'Missing price' }]}
>
<Input />
</Form.Item>
<Form.Item
{...testItem}
label="Name"
name={[testItem.name, 'name']}
fieldKey={[testItem.fieldKey, 'name']}
rules={[{ required: true, message: 'Missing name' }]}
>
<Input />
</Form.Item>
<MinusCircleOutlined onClick={() => removetest(testItem.name)} />
</Space>
);
})}
<Form.Item>
<Button
type="dashed"
onClick={() => addtest()}
block
icon={<PlusOutlined />}
>
填加子
</Button>
</Form.Item>
</>
)}
</Form.List>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
添加外层
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default Test;
antd Form.list嵌套Form.list
最新推荐文章于 2024-07-05 14:51:43 发布