antd的form组件在每次提交时比较与上一次提交的值相比更新的值
antd的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函数会被调用,我们就可以在其中比较当前表单值和上一次提交的表单值,得到更新的值。
原文地址: https://www.cveoy.top/t/topic/bK4f 著作权归作者所有。请勿转载和采集!