可以使用antd的Form组件的getFieldValue函数获取当前表单的值,然后与上一次提交的值进行比较,只提交更新的部分。具体实现可以参考以下代码:

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

const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', age: '' });
  const [lastFormData, setLastFormData] = useState({ name: '', age: '' });

  const handleFormChange = (changedFields) => {
    setFormData({ ...formData, ...changedFields });
  };

  const handleSubmit = () => {
    const updatedData = {};
    for (const key in formData) {
      if (formData[key] !== lastFormData[key]) {
        updatedData[key] = formData[key];
      }
    }
    // 发送更新后的数据
    console.log(updatedData);
    // 更新上一次提交的数据
    setLastFormData({ ...lastFormData, ...updatedData });
    message.success('提交成功');
  };

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

在这个例子中,我们维护了两个状态,formData表示当前表单的值,lastFormData表示上一次提交的值。每次表单值发生变化时,通过handleFormChange函数更新formData,然后在提交时使用for循环遍历formData,找出与lastFormData不同的部分,只提交这部分数据。最后,在提交成功后更新lastFormData的值,以便下一次提交时使用。

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

原文地址: https://www.cveoy.top/t/topic/bK8r 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录