解决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实现二分查找法实现代码
Nov 12 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
vue实现记事本功能
Jun 26 Javascript
解决vuex刷新数据消失问题
Nov 12 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 curl模拟浏览器抓取网站信息
2013/10/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
php实现留言板功能
2017/03/05 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
给护士表扬信
2014/01/19 职场文书
党性心得体会
2014/09/03 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
小学四年级作文之写景
2019/08/23 职场文书