在Ant Design中,可以使用Form
组件来处理表单的提交和验证。要提交仅更改的表单项,可以使用Form
组件的getFieldsValue
方法来获取表单的所有字段值,然后与初始值进行比较,只提交已更改的字段。
下面是一个示例代码:
import { Form, Button } from 'antd';
import { useState } from 'react';
const Demo = () => {
const [form] = Form.useForm();
const [initialValues, setInitialValues] = useState({});
const handleSubmit = () => {
form.validateFields().then((values) => {
// 获取表单的所有字段值
const formValues = form.getFieldsValue();
// 比较表单字段值与初始值,获取仅更改的字段
const changedFields = Object.keys(formValues).reduce((result, fieldName) => {
if (formValues[fieldName] !== initialValues[fieldName]) {
result[fieldName] = formValues[fieldName];
}
return result;
}, {});
// 提交仅更改的字段
console.log(changedFields);
// 发起实际的提交请求
});
};
const handleReset = () => {
form.resetFields();
};
return (
);
};
export default Demo;
在上面的示例代码中,我们使用Form
组件的useForm
方法来创建一个表单实例,并使用useState
来保存表单的初始值。在提交表单时,我们首先调用form.validateFields
来进行表单字段的验证,然后使用form.getFieldsValue
获取所有字段的值。接下来,我们通过比较表单字段值与初始值,获取仅更改的字段,并进行提交。
注意:在实际的提交请求中,你需要将console.log(changedFields)
替换为你自己的提交逻辑。