Ant Design Form 组件：高效获取表单值变化

Ant Design 的 Form 组件提供了一个 onValuesChange 函数，它会在表单值发生变化时被调用。我们可以利用这个函数来比较当前表单值和上一次提交的表单值，从而得到更新的值。具体实现如下：

定义一个 state 来保存上一次提交的表单值

const [lastValues, setLastValues] = useState({});

在 onValuesChange 函数中比较当前表单值和上一次提交的表单值

const handleValuesChange = (changedValues, allValues) => {
  // 比较当前表单值和上一次提交的表单值，得到更新的值
  const updatedValues = {};
  Object.keys(changedValues).forEach((key) => {
    if (changedValues[key] !== lastValues[key]) {
      updatedValues[key] = changedValues[key];
    }
  });
  console.log(updatedValues);
  // 更新 lastValues
  setLastValues(allValues);
};

在 Form 组件中注册 onValuesChange 函数

<Form onValuesChange={handleValuesChange}>
  // 表单项
</Form>

这样，每次表单值发生变化时，handleValuesChange 函数会被调用，我们就可以在其中比较当前表单值和上一次提交的表单值，得到更新的值。