antd form表单一行多个组件并对其校验

一行一个标签对应多个输入组件，这个需求很常见但在官方例子没看到合适的，因为官方建议：

注意：一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，help required validateStatus 无法自动生成。

经过摸索，证实这样写是可行的，如下：

        
            
                {this.props.form.getFieldDecorator('shareholderName2', {
                    rules: [{ required: true, message: '请输入股东名称' }],
                })()}
            
            
                
                    {this.props.form.getFieldDecorator('shareholderRate2', {
                        rules: [{
                            required: true,
                            // tslint:disable-next-line:max-line-length
                            pattern: /(^[1-9][0-9](\.\d)?$)|(^[1-9](\.\d)?$)|(^0\.\d$)/,
                            message: '请输入正确的持股比例',
                        }],
                    })()}
                
            
        
    

方法就是用antd的栅格布局来控制排列，在后面的输入组件用FormItem再包一层，这样校验位置也正确，简直不要太爽。效果如图：