解决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 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
jcrop基本参数一览
Jul 16 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
jquery实现图片预加载
Dec 25 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
详解JavaScript原型与原型链
Nov 16 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 fsockopen伪造post与get方法的详解
2013/06/14 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python 异常处理总结
2016/10/18 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python lxml中etree的简单应用
2019/05/10 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
党员公开承诺书2015
2015/01/21 职场文书
优秀新员工事迹材料
2019/05/13 职场文书