antd Form 监听数据变化的2种方式比较。onValuesChange vs Form.useWatch

最新推荐文章于 2024-03-02 14:54:13 发布

这个昵称也不能用吗？

最新推荐文章于 2024-03-02 14:54:13 发布

阅读量2.9k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_37766810/article/details/132736718

版权

  const onValuesChange = (changedValue: any) => {
    console.log('changedValues', changedValue);//此处只会展示，form里发生变更的属性
  };

此方式类似于使用useState包裹的数据。是可以实时更新的。参考官网使用方式

  const language = Form.useWatch('language', form);
  console.log('language', language);

使用 form.setFields 和 form.setFieldsValue 触发的改动。Form.useWatch可以监听到，并动态更新。但是onValuesChange监听不到。
Form.useWatch监听的数据可以直接动态更新，方便直接消费（展示到页面引起重新render）。onValuesChange则适合只是获取不做往页面动态更新的操作。
Form.useWatch的第一个参数是path。在需要监听的form数据层级比较深的情况下，可以很明确的指定需要监控的数据的path。onValuesChange则不好判断，此次更新的是否是我们需要的路径。
useWatch只适用于 > 4.20.0的版本