antd form.list嵌套使用

antd的Form组件中可以使用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;