使用antd的form组件实现在每次提交时只提交与上一次提交的值相比更新的值
可以使用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的值,以便下一次提交时使用。
原文地址: https://www.cveoy.top/t/topic/bK8r 著作权归作者所有。请勿转载和采集!