使用Antd4.x 的表单组件-From-From.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; ```