Ant Design 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>
  );
};