antd表单验证无效的情况怎样解决?方法是什么?
Admin 2021-10-18 群英技术资讯 2491 次浏览
antd表单验证无效的情况怎样解决?关于antd form表单验证实现的问题,本文给大家分享两种解决方法,方法如下,有需要的朋友可以借鉴参考。
方法一:
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表单验证无效的解决方法就介绍到这,上述实例具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多antd form表单的内容,大家可以关注其它的相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
node.js怎样实现断点续传?首先,断点续传怎样理解呢?一般,如果是一些只有几M的图片或者文件,我们将它们上传的到服务器是上是很快的,但是如果是几百M或者几G的文件,那么上传到服务器的时间就会更久,如果这期间文件有断网或者网络差要重新下载情况,那么得多人抓狂呀!而使用切片+断点续传就能够很好应对这样的情况。那么具体怎样做呢?下面跟随小编一起来详细了解看看吧。
本文主要介绍了Vue实现组件间通信的几种方式,不同的场景使用不同的方式,基本满足所有开发场景中的通信需求,感兴趣的可以了解一下
eval是全局对象的一个函数属性,用于计算某个字符串,并执行其中的JavaScript代码。函数语法是eval(string)。参数string表示要计算的字符串。
小程序怎样实现列表分页展示及上下页点击?下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧。
前端有时要处理一些数据(比如多语言文件内容的替换),我们不要傻乎乎地干这种重复枯燥又浪费时间的ctrl C+ ctrl V的工作,这种事情交给计算机做再合适不过了。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008