antd form表单输入字段被删除时不保留字段值

要实现字段被删除时不保留字段值的功能，可以通过使用form.resetFields()方法来清空表单字段的值。

首先，在使用Form组件创建表单时，设置onValuesChange属性来监听表单字段值的变化。当字段被删除时，该方法会被调用。

import { Form, Input, Button } from 'antd';
import { useState } from 'react';

const MyForm = () => {
  const [form] = Form.useForm();
  const [fields, setFields] = useState([{ name: ['field1'], value: 'Initial field value' }]);

  const handleDeleteField = (fieldName) => {
    setFields(fields.filter((field) => field.name[0] !== fieldName));
    form.resetFields(); // 清空表单字段的值
  };

  const handleValuesChange = () => {
    // 监听表单字段值的变化
  };

  return (
    <Form form={form} onValuesChange={handleValuesChange}>
      {fields.map((field, index) => (
        <Form.Item key={index} label={`Field ${index + 1}`}>
          <Input value={field.value} />
          <Button onClick={() => handleDeleteField(field.name[0])}>删除</Button>
        </Form.Item>
      ))}
    </Form>
  );
};

export default MyForm;

在上面的代码中，handleDeleteField方法用于删除指定的字段，并通过setFields更新表单字段的列表。然后，调用form.resetFields()方法来清空表单字段的值。这样，即使字段被删除，表单字段的值也会被清空