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

  1. 定义一个state来保存上一次提交的表单值
const [lastValues, setLastValues] = useState({});
  1. 在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);
};
  1. 在Form组件中注册onValuesChange函数
<Form onValuesChange={handleValuesChange}>
  // 表单项
</Form>

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

antd的form组件在每次提交时比较与上一次提交的值相比更新的值

原文地址: https://www.cveoy.top/t/topic/bK4f 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录