antd Form 监听数据变化的2种方式比较。onValuesChange vs Form.useWatch
此方式类似于 使用useState包裹的数据。
·
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);
区别:
- 使用 form.setFields 和 form.setFieldsValue 触发的改动。Form.useWatch可以监听到,并动态更新。但是onValuesChange监听不到。
- Form.useWatch监听的数据可以直接动态更新,方便直接消费(展示到页面引起重新render)。onValuesChange则适合只是获取不做往页面动态更新的操作。
- Form.useWatch的第一个参数是path。在需要监听的form数据层级比较深的情况下,可以很明确的指定需要监控的数据的path。onValuesChange则不好判断,此次更新的是否是我们需要的 路径。
- useWatch只适用于 > 4.20.0的版本
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)