解决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 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 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
php设计模式之委托模式
2016/02/13 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python访问sqlserver示例
2014/02/10 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
python求最大值最小值方法总结
2019/06/25 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
python实现人机五子棋
2020/03/25 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
20岁生日感言
2014/01/13 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
英语复习计划
2015/01/19 职场文书
户外亲子活动总结
2015/05/08 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
三八妇女节致辞
2015/07/31 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技