React+Antd项目,Form的Input已经有内容,但是还是提示此项为必填项,不能为空
一、前言
我们在进行数据采集功能开发的时候,往往会用到Form表单,这其中必不可少的就会用到Input(多种type类型)输入框。经常还会对其中的某一些Input输入做一些必填或者某些输入格式的限制,设置默认值和placehoder等等需求场景。我在使用React Antd构建含有多个Input组件的Form表格时,遇到了下述问题…
二、问题描述、分析及解决办法
2.1、问题描述
一个Form表单,包含了数个Input输入框组件,其中有一些为必填的Input框,其中有一些Input组件用defaultValue属性设置了默认值,即Input框内可以看到是有数据的,但是对这些Input内容不做任何修改,直接提交Form表单,发现必填的Input框会弹出“此项不能为空 / 此项为必填项,不可为空”的报错。
直接上图更直观:
2.2、问题分析
那么,既然Input框内表现看来,是有值的,但是为什么这个校验规则会被触发呢?于是,我想要把这个设置了defaultValue值的Input的value打印出来看看到底是什么情况。结果,打印出来的value竟然为undefined!
由此看来,必填报错规则是没有问题的,问题出在了这个设置了defaultValue的Input组件的初始的value值是没有的。
2.3、解决办法
那么,既然defaultValue不能时Input组件拥有一个初始的value值,要怎样设置这个初始的value呢?
默认值是Input输入框的,除非手动输入,否则Form表单并不能获取到Input的默认值。既然是表单的校验,则需要告诉表单,某个input有默认值,默认值为xxx。
所以,感觉接下来我们应该在Form表单组件上做些什么?对的,我查阅了一些资料,找到了Antd的Form组件中的initialValues属性,官网对这个属性的解读是这样的:
接下来,就直接上代码:
// 未修改bug的代码:
...
<Form name="XXX" ...>
<Form.Item name="formItemName1" rules={[{required: true, message: '此项为必填项,不能为空!'}]}>
<Input defaultValue={defauleData1} />
</Form>
...
</Form>
...
// 修改bug后的代码
...
// 注意1:initialValues的值是一个对象,也就意味着这里面的属性可以有多个,以对象的格式一次写入即可。
// 注意2:属性的key是Form.Item的name属性的值,属性的value,填想要回填的默认值(我这里和Input中的defaultValue值保持一致)。
// 注意3:Input需要设置value属性,这里保证和initialValues对象中对应键名后的值名一致。
<Form name="XXX" initialValues={{ formItemName1: defauleData1, formItemName2: defauleData2}} ...>
<Form.Item name="formItemName1" rules={[{required: true, message: '此项为必填项,不能为空!'}]}>
<Input defaultValue={defauleData1} value={defauleData1}/>
</Form>
...
</Form>
...
到此,这个问题就完美解决了!
三、说明
最近在初步使用React过程中,还有很多机制不明白,所以,在此记录两个问题,后期我会翻阅资料对其进行自答(立个Flag鞭策自己不断学习)。如果诸君有清楚其原理的,也欢迎在评论区留言或者私信我,帮忙解答:
1、页面数据进行变化后,React什么情况下会重新渲染对应的DOM,更新页面,什么情况下不更新页面?
2、为什么有时候useState更新了数据之后,页面不会数据更新(useState是什么时候对数据进行更新的底层机制)?
参考链接:
Antd官网Form组件API
踩坑 antd Form表单获取input默认值失败,Form表单校验input 必填 默认值为undefined
欢迎大家一起讨论、学习
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhicjfec
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22