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()分别对每个表单装饰，从而达到表单数据解耦，互不干扰，然后将各个表单取得的字段通过回调函数传给父组件来分别接收）：