解决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 相关文章推荐
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
Jan 07 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 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
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
《APMServ 5.1.2》使用图解
2006/10/23 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
jupyter安装小结
2016/03/13 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
python 瀑布线指标编写实例
2020/06/03 Python
长青弘远的面试题
2012/06/09 面试题
计算机应用职专应届生求职信
2013/11/12 职场文书
委托书模板
2014/04/04 职场文书
继承权公证书
2014/04/09 职场文书
终止劳动合同协议书
2014/04/14 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
大学生实习推荐信
2015/03/27 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python