解决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)
Oct 31 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
环境工程专业自荐信
2014/03/03 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
室内趣味活动方案
2014/08/24 职场文书
高一军训的心得体会
2014/09/01 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
安全教育主题班会教案
2015/08/12 职场文书
社区干部培训心得体会
2016/01/06 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL