Ant Design Form 组件表单值变化监听及提交优化

Ant Design 的 Form 组件可以通过监听表单值的变化来获取表单的最新值，从而与上一次的值进行比较并更新。

具体实现方法如下：

在组件中引入 Form 组件和 useEffect 钩子函数

import React, { useEffect } from 'react';
import { Form } from 'antd';

在组件中定义表单的初始值和表单项的配置信息，并使用 Form.create() 方法将其包裹起来

const MyForm = Form.create({
  name: 'my_form',
  initialValues: {
    username: '',
    password: '',
  },
})(props => {
  const { getFieldDecorator } = props.form;

  return (
    <Form>
      <Form.Item label='Username'>
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Please input your username!' }],
        })(<Input />)}
      </Form.Item>
      <Form.Item label='Password'>
        {getFieldDecorator('password', {
          rules: [{ required: true, message: 'Please input your password!' }],
        })(<Input.Password />)}
      </Form.Item>
      ...
    </Form>
  );
});

使用 useState 钩子函数来定义一个保存表单值的 state，以及一个保存表单变化状态的 state

const [formValues, setFormValues] = useState({});
const [isFormChanged, setIsFormChanged] = useState(false);

在表单组件中添加一个 useEffect 钩子函数，用于监听表单值的变化，更新 formValues 和 isFormChanged 的值

effect(() => {
  const { getFieldsValue } = props.form;
  const values = getFieldsValue();
  const changed = Object.keys(values).some(key => values[key] !== formValues[key]);

  if (changed) {
    setFormValues(values);
    setIsFormChanged(true);
  } else {
    setIsFormChanged(false);
  }
}, [props.form]);

在表单提交的回调函数中根据 isFormChanged 的值来判断是否需要更新表单的值

const handleSubmit = e => {
  e.preventDefault();

  props.form.validateFields((err, values) => {
    if (!err) {
      // 如果表单值发生了变化，则更新表单的值
      if (isFormChanged) {
        // TODO: 将表单的值提交到后端
        setFormValues(values);
        setIsFormChanged(false);
      } else {
        // TODO: 将表单的值提交到后端
      }
    }
  });
};