Antd表单仅提交已变更表单项的实现方法咨询

步骤1：启用Form实例控制 #

首先需要通过Form.useForm()创建Form实例并绑定到组件上，这样才能获取初始值和当前字段值进行对比：

import { Form } from 'antd';

// 在组件内部创建form实例
const [form] = Form.useForm();

// 绑定到Form组件
<Form
    form={form}
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    initialValues={{
        widgetUuid: widget.uuid,
        paymentMethod: getSelectedPaymentMethod(widget),
        paymentPackage: chargingArrGet(widget)
    }}
    onFinish={onFinishSelect}
    autoComplete="off"
    layout='horizontal'
>
    {/* 表单项内容 */}
</Form>

步骤2：对比初始值与当前值，筛选变更字段 #

在onFinishSelect方法中，通过Form实例获取初始值和当前提交值，逐一对比字段内容，只处理发生变更的项：

const onFinishSelect = (values: any) => {
    const tenantGroupId = userDetails?.OwnedEnterprises[0]?.groupId || "";
    // 获取表单初始值
    const initialValues = form.getInitialValues();

    // 对比paymentMethod是否变更
    if (values.paymentMethod !== initialValues.paymentMethod) {
        const req = {
            "paymentMethod": values.paymentMethod === 1 ? "AddToBill" : 9,
            "msisdn": activeMsisdn || null,
            "invoiceNo": activeCard?.invoiceNo || null
        }
        dispatch<any>(updatePaymentMethod(tenantGroupId, values.widgetUuid, req));
    }

    // 对比paymentPackage是否变更
    if (values.paymentPackage !== initialValues.paymentPackage) {
        const packageReq = {
            "newRatePlans": [values.paymentPackage]
        }
        dispatch<any>(updateRatePlan(tenantGroupId, values.widgetUuid, packageReq));
    }
}

注意事项：复杂类型值的对比 #

如果paymentPackage是对象或数组这类复杂类型，浅比较（!==）会不准确，此时可以使用深比较方法，比如引入lodash.isEqual：

import isEqual from 'lodash/isEqual';

// 替换对应的判断逻辑
if (!isEqual(values.paymentPackage, initialValues.paymentPackage)) {
    // 执行提交逻辑
}

额外优化：提取对比逻辑为工具函数 #

如果表单字段较多，可以把对比逻辑封装成工具函数，复用性更强：

const getChangedFields = (initial: any, current: any) => {
    return Object.keys(current).reduce((changed, key) => {
        if (!isEqual(current[key], initial[key])) {
            changed[key] = current[key];
        }
        return changed;
    }, {} as any);
}

// 在onFinish中使用
const changedFields = getChangedFields(form.getInitialValues(), values);
if (changedFields.paymentMethod) {
    // 提交paymentMethod变更
}
if (changedFields.paymentPackage) {
    // 提交paymentPackage变更
}

内容的提问来源于stack exchange，提问作者Buwaneka Sudheera