使用antd的form组件实现在每次提交时比较与上一次提交的值相比更新的值

Antd的Form组件提供了一个onValuesChange方法，可以实现在表单值发生变化时触发的回调函数。我们可以利用这个方法来比较当前提交的值与上一次提交的值，从而得到更新的值。

具体实现步骤如下：

定义一个状态prevValues，用来保存上一次提交的表单值。

const [prevValues, setPrevValues] = useState({});

在Form组件中添加onValuesChange属性，当表单值发生变化时，比较当前值与上一次提交的值，得到更新的值，并将当前值保存为下一次提交的上一次的值。

<Form
  onValuesChange={(changedValues, allValues) => {
    const updatedValues = {};
    for (const key in allValues) {
      if (allValues.hasOwnProperty(key) && prevValues[key] !== allValues[key]) {
        updatedValues[key] = allValues[key];
      }
    }
    setPrevValues(allValues);
    console.log(updatedValues);
  }}
>
  ...
</Form>

完整代码示例：

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

const MyForm = () => {
  const [prevValues, setPrevValues] = useState({});

  const handleSubmit = (values) => {
    console.log("submit", values);
  };

  return (
    <Form
      onFinish={handleSubmit}
      onValuesChange={(changedValues, allValues) => {
        const updatedValues = {};
        for (const key in allValues) {
          if (allValues.hasOwnProperty(key) && prevValues[key] !== allValues[key]) {
            updatedValues[key] = allValues[key];
          }
        }
        setPrevValues(allValues);
        console.log(updatedValues);
      }}
    >
      <Form.Item label="Name" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="Age" name="age">
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;