解决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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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
德生PL990的分析评价
2021/03/02 无线电
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
JS编程小常识很有用
2012/11/26 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
python字符串连接方法分析
2016/04/12 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
公务员综合考察材料
2014/02/01 职场文书
汽车促销活动方案
2014/03/31 职场文书
学期评语大全
2014/04/30 职场文书
婚前协议书范本
2014/10/27 职场文书
暑期社会实践证明书
2014/11/17 职场文书
工作证明书
2015/06/15 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
2019毕业论文致谢词
2019/06/24 职场文书