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

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

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

区别:

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

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐