解决antd 表单设置默认值initialValue后验证失效的问题


Posted in Javascript onNovember 02, 2020

方法一:

getFieldDecorator没有第三个参数,如果写了3个参数就会出错

错误代码:

<Form.Item>
   {
    getFieldDecorator('userName', { initialValue: 'Tom' },{
    rules: [{
     required: true, message: '请输入用户名',
    }],
    })(
    <Input placeholder='请输入用户名'/>
    )
   }
</Form.Item>

正确代码:

<Form.Item>
 {
 getFieldDecorator('userName',{
  initialValue:'Tom',
  rules:[
   {required: true,message:'请输入用户名'}
    ]
   })(
   <Input placeholder='请输入用户名'/>
   )
}
</Form.Item>

方法二:通过setFieldsValue来设置默认值可以解决

this.props.form.setFieldsValue({
 inputValue1:this.state.inputValue1,
 inputValue2:this.state.inputValue2,
 inputValue3:this.state.inputValue3,
});

如果还不能解决,查看是否在表单提交函数里写了验证代码

handleSubmit = (e) => {
  e.preventDefault();
  this.props.form.validateFields((err) => {
   if (err) {
    console.log('表单验证失败');
   }else{
    this.handleOk();//这里是表单验证成功执行的函数
    
   }
  });
 
 };

补充知识:antd自定义组件初始值没有返回或者设置initialValue,form.validateFields不会执行验证

在自定义组件中加个componentDidMount返回初始值就可以啦

componentDidMount() {
  const { onChange } = this.props;
  onChange({
   ...this.state,
  });
 }

以上这篇解决antd 表单设置默认值initialValue后验证失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 #Javascript
vue+iview使用树形控件的具体使用
Nov 02 #Javascript
在antd Form表单中select设置初始值操作
Nov 02 #Javascript
react+antd 递归实现树状目录操作
Nov 02 #Javascript
antd form表单数据回显操作
Nov 02 #Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 #Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 #Javascript
You might like
用PHP编写和读取XML的几种方式
2013/01/12 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
如何让CI框架支持service层
2014/10/29 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
python使用rpc框架gRPC的方法
2018/08/24 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python库安装速度过慢解决方案
2020/07/14 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
质检部部长职责
2013/12/16 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
主题实践活动总结
2014/05/08 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书