nanxiaobei / ant-plus

🪄 Ant Design Form Simplified
MIT License
279 stars 16 forks source link

使用Watch组件的onChange回调时产生的困惑~ #16

Closed ZhaoTim closed 1 year ago

ZhaoTim commented 1 year ago

首先,Watch组件真的很好用!

但是在使用的过程中,对于onChange属性产生了一些困惑,我知道onChange会在被监听的字段值变化时被调用,可是下面这种场景,我不希望它触发的那么频繁:

前提,我希望当某个下拉框(A表单项)改变时,重置B表单项的值,所以我使用Wacth监听A表单项,然后在onChange里清空B表单项。

  1. 当前页面为编辑态,从后端获取到表单数据,然后使用form.seFieldValue设置A表单项和B表单项的值。
  2. 由于A表单项的值改变,onChange被调用,B表单项被清空,可是我此时是刚进入页面,什么都没干,B表单项就会清空了~

写完这段话,我发现我似乎清空B表单项的时机是用户手动更改A表单项的值的时候,但是我又一想,如果进入页面以后一段时间,我再使用form.seFieldValue设置A表单项,似乎onChange也理应被调用...

写到这,我甚至自己都有点迷茫了...

nanxiaobei commented 1 year ago

可以置一个 useRef,标识是不是 "从后端获取到数据时调用的 form.seFieldValue" 即可

比如

const isServerUpdate = useRef(false)

// server 首次获取到数据时
isServerUpdate.current = true;
form.seFieldValue(xxx);

// Watch 的 onChange
onChange = () => {
  if (isServerUpdate.current) {
    isServerUpdate.current = false;
    return;
  }

  // 其它代码 ...
}