解决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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
jQuery Ajax之load()方法
Oct 12 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
js获取视频时长代码
Apr 10 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python实现简单遗传算法
2018/03/19 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python 占位符的使用方法详解
2019/07/10 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
2014年自我评价
2014/01/04 职场文书
临床护士自荐信
2014/01/31 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript