解决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 模拟用户单击事件
Dec 31 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
JS函数重载的解决方案
May 13 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
javascript学习小结之prototype
Dec 03 Javascript
使用jquery如何获取时间
Oct 13 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
vue实现搜索功能
May 28 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
解决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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
PHP 危险函数解释 分析
2009/04/22 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php生成图片验证码的方法
2016/04/15 PHP
php中引用&的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python实现维吉尼亚加密法
2019/03/20 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
五年级音乐教学反思
2014/02/06 职场文书
廉政承诺书
2015/01/19 职场文书
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android