解决ant Design中this.props.form.validateFields未执行的问题


Posted in Javascript onOctober 27, 2020

在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行,也没有报错。

原因:

我使用了自定义校验 validator ,在自定义校验方法中有个错误,使用了未定义的变量。

注意:

1、使用validator 时,注意自定义方法中是否有错误;对于如何解决没有错误提示,官网提示:可以选择通过 async 返回一个 promise 或者使用 try...catch进行错误捕获,具体查看官网form组件;

2、使用validator 时,自定义方法中 callback 必须被调用。

补充知识:ant design vue 表单域的validateFields取值和子item的change取值的先后问题

废话不多,先咔的撸出代码先

我先在created中初始化表单域form

解决ant Design中this.props.form.validateFields未执行的问题

然后在表单域子节点中绑定@change="handleChange"函数,

解决ant Design中this.props.form.validateFields未执行的问题

然后我设想是每一次单选完后打印出单选后的值

解决ant Design中this.props.form.validateFields未执行的问题

然而结果是每次打印的值是单选前的值,比如:

我开始时默认选正常,第一次选异常,打印出正常

第二次选正常,结果打印出异常

解决ant Design中this.props.form.validateFields未执行的问题

我懵逼了,一般出现这种情况应该是跟事件机制同步或者异步的先后顺序有关,于是仔细设置了validateFields为异步输出

解决ant Design中this.props.form.validateFields未执行的问题

这回输出正常了,

解决ant Design中this.props.form.validateFields未执行的问题

果然是,个人猜测是输入框的change事件赋值发生在表单域的validateFields()事件之后,导致取到的值是修改前的值

以上这篇解决ant Design中this.props.form.validateFields未执行的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
JS实现图片切换效果
Nov 17 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
JS的深浅复制详细
Oct 16 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 #Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 #Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 #Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 #Javascript
js实现简易ATM功能
Oct 27 #Javascript
Antd的table组件表格的序号自增操作
Oct 27 #Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 #Javascript
You might like
Zerg基本策略
2020/03/14 星际争霸
php win下Socket方式发邮件类
2009/08/21 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
Python ljust rjust center输出
2008/09/06 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python中zip函数如何使用
2020/06/04 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
初中信息技术教学计划
2015/01/22 职场文书
团代会闭幕词
2015/01/28 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server