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

可以使用react的useState和useEffect来实现这个功能。

首先，在函数组件中定义一个state来存储上一次提交的表单值和当前表单值：

const [lastValues, setLastValues] = useState({});
const [currentValues, setCurrentValues] = useState({});

然后，在表单组件中，使用useEffect来监听表单值的变化，并将变化的值存储到currentValues中：

useEffect(() => {
  setCurrentValues(form.getFieldsValue());
}, [form.getFieldsValue()]);

接着，在表单提交时，比较当前表单值和上一次提交的表单值，只提交更新的字段：

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const updatedValues = Object.keys(currentValues).reduce((acc, key) => {
    if (currentValues[key] !== lastValues[key]) {
      acc[key] = currentValues[key];
    }
    return acc;
  }, {});
  // 提交updatedValues
  setLastValues(currentValues);
};

完整代码示例：

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

const Demo: React.FC = () => {
  const [lastValues, setLastValues] = useState({});
  const [currentValues, setCurrentValues] = useState({});
  const [form] = Form.useForm();

  useEffect(() => {
    setCurrentValues(form.getFieldsValue());
  }, [form.getFieldsValue()]);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const updatedValues = Object.keys(currentValues).reduce((acc, key) => {
      if (currentValues[key] !== lastValues[key]) {
        acc[key] = currentValues[key];
      }
      return acc;
    }, {});
    // 提交updatedValues
    setLastValues(currentValues);
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      <Form.Item label="姓名" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="年龄" name="age">
        <Input type="number" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};