Ant Design Form 表单字段删除时不保留字段值 - 实用技巧

要实现字段被删除时不保留字段值的功能，可以通过使用form.resetFields()方法来清空表单字段的值。\n\n首先，在使用Form组件创建表单时，设置onValuesChange属性来监听表单字段值的变化。当字段被删除时，该方法会被调用。\n\njsx\nimport { Form, Input, Button } from 'antd';\nimport { useState } from 'react';\n\nconst MyForm = () => {\n const [form] = Form.useForm();\n const [fields, setFields] = useState([{ name: ['field1'], value: 'Initial field value' }]);\n\n const handleDeleteField = (fieldName) => {\n setFields(fields.filter((field) => field.name[0] !== fieldName));\n form.resetFields(); // 清空表单字段的值\n };\n\n const handleValuesChange = () => {\n // 监听表单字段值的变化\n };\n\n return (\n <Form form={form} onValuesChange={handleValuesChange}>\n {fields.map((field, index) => (\n <Form.Item key={index} label={`Field ${index + 1}`}>\n <Input value={field.value} />\n <Button onClick={() => handleDeleteField(field.name[0])}>删除</Button>\n </Form.Item>\n ))}\n </Form>\n );\n};\n\nexport default MyForm;\n\n\n在上面的代码中，handleDeleteField方法用于删除指定的字段，并通过setFields更新表单字段的列表。然后，调用form.resetFields()方法来清空表单字段的值。这样，即使字段被删除，表单字段的值也会被清空。