解决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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
详解JS函数防抖
Jun 05 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
图书管理程序(三)
2006/10/09 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php实现删除空目录的方法
2015/03/16 PHP
yii数据库的查询方法
2015/12/28 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
JavaScript Prototype对象
2009/01/07 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
Bootstrap基础学习
2015/06/16 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
python动态监控日志内容的示例
2014/02/16 Python
python实现简单遗传算法
2018/03/19 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python logging添加filter教程
2019/12/24 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python中常见的数制转换有哪些
2020/05/27 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
解决python运行效率不高的问题
2020/07/20 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
经济信息系毕业生自荐信范文
2014/03/15 职场文书
食品安全承诺书范文
2014/08/29 职场文书
行政文员岗位职责
2015/02/04 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2015年仓库工作总结
2015/04/09 职场文书