antd表单验证的坑

坑一:

Form.Item中的表单如果是调用的react子组件,则表单验证功能失效,请看例子:

表单父组组件:

Item组件:

这样虽然能正常渲染出组件样式,但是会导致submit功能Bug和resetFields功能失效,如下图:

解决办法:

刚开始我以为是我哪里写得不对,找了很久原因,把子组件换class写法函数写法都试了,甚至把子组件搬到父组件同一个文件中都还是不行,最后我直接把子组件里面的替换到调用子组件的地方,果然可行,但是这么写,太丑了,于是直接把调用组件方式改成调用函数的方式,这样就解决了问题,代码也看起来美观。

最终其实就是将上面代码中调用子组件的地方修改为如下:

 

 

坑二:

开发中经常会遇到到一个Form.Item中包含两个或多个输入组件(如下图这种),要使用表单验证功能的话,一个Item中只能有一个表单,即form.getFieldDecorator定义表单字段在Form.Item中只能能有一个,并且Item中再嵌套Item的话reset清空表单也会失效

坑三:

一个页面如果有多个表单块并且要使用验证功能的话,不能将多个表单写在一个组件中,即一个组件只能有一个@Form.create(),意味着this.props.form唯一,如果一个页面有两个表单则会造成数据多个表单之间字段互相影响,并且提交其中一个,另一个也会提交,然而你只想提交一个。

解决方法(如下图代码段,将多个表单每个都抽离为单独组建,@Form.create()分别对每个表单装饰,从而达到表单数据解耦,互不干扰,然后将各个表单取得的字段通过回调函数传给父组件来分别接收):

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章