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;