解决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代码,粗糙版
Nov 04 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
node简单实现一个更改头像功能的示例
Dec 29 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
wxPython学习之主框架实例
2014/09/28 Python
python构建深度神经网络(DNN)
2018/03/10 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
详解python logging日志传输
2020/07/01 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
文明宿舍获奖感言
2014/02/07 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
父母寄语大全
2014/04/12 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android
Element实现动态表格的示例代码
2021/08/02 Javascript
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis