解决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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
python单元测试unittest实例详解
2015/05/11 Python
Python socket编程实例详解
2015/05/27 Python
python从入门到精通(DAY 2)
2015/12/20 Python
在Python中使用Neo4j的方法
2019/03/14 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
什么是Python包的循环导入
2020/09/08 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
服务生自我鉴定
2014/01/22 职场文书
设计专业自荐信
2014/06/19 职场文书
销售团队获奖感言
2014/08/14 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
Python Django项目和应用的创建详解
2021/11/27 Python
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers