解决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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
js自带函数备忘 数组
2006/12/29 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
详解node.js 事件循环
2020/07/22 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python处理文本换行符实例代码
2018/02/03 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Python之Class&Object用法详解
2019/12/25 Python
python实现同一局域网下传输图片
2020/03/20 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
平面设计的岗位职责
2013/11/08 职场文书
法律七进实施方案
2014/03/15 职场文书
小班评语大全
2014/05/04 职场文书
无传销社区工作方案
2014/05/13 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
2016大学军训通讯稿
2015/11/25 职场文书