antd Form.list嵌套Form.list

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;

示意图

  • 13
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
antdForm组件中可以使用List组件进行嵌套使用,实现动态添加表单项的效果。 具体使用方法如下: 1. 在Form组件中使用List组件作为表单项的容器,设置name属性为需要动态添加的表单项的字段名。 2. 在List组件中使用FormItem组件作为每个表单项的容器,设置name属性为表单项的字段名。 3. 在FormItem组件中使用对应的antd表单控件,如Input、Select等,设置name属性为表单项的字段名。 4. 在List组件中使用Button组件作为添加按钮,设置onClick事件为添加表单项的方法。 5. 在添加表单项的方法中,使用Form组件的setFieldsValue方法更新表单数据,添加新的表单项。 6. 在List组件中使用Button组件作为删除按钮,设置onClick事件为删除表单项的方法。 7. 在删除表单项的方法中,使用Form组件的setFieldsValue方法更新表单数据,删除对应的表单项。 示例代码如下: ``` import { Form, Input, Select, Button, List } from 'antd'; const { Option } = Select; const Demo = () => { const [form] = Form.useForm(); const onFinish = (values) => { console.log(values); }; const addFormItem = () => { const { list } = form.getFieldsValue(); const nextList = [...list, { name: '', age: '', gender: '' }]; form.setFieldsValue({ list: nextList }); }; const removeFormItem = (index) => { const { list } = form.getFieldsValue(); const nextList = [...list]; nextList.splice(index, 1); form.setFieldsValue({ list: nextList }); }; return ( <Form form={form} onFinish={onFinish}> <List name="list"> {(fields, { add, remove }) => ( <> {fields.map((field, index) => ( <Form.Item key={field.key} name={[field.name, 'name']} fieldKey={[field.fieldKey, 'name']} rules={[{ required: true, message: '请输入姓名' }]} > <Input placeholder="姓名" /> </Form.Item> <Form.Item key={field.key} name={[field.name, 'age']} fieldKey={[field.fieldKey, 'age']} rules={[{ required: true, message: '请输入年龄' }]} > <Input placeholder="年龄" /> </Form.Item> <Form.Item key={field.key} name={[field.name, 'gender']} fieldKey={[field.fieldKey, 'gender']} rules={[{ required: true, message: '请选择性别' }]} > <Select placeholder="性别"> <Option value="male">男</Option> <Option value="female">女</Option> </Select> </Form.Item> <Button onClick={() => removeFormItem(index)}>删除</Button> ))} <Button onClick={() => addFormItem()}>添加</Button> </> )} </List> <Button htmlType="submit">提交</Button> </Form> ); }; export default Demo; ```
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值