antd form表單一行多個組件並對其校驗

一行一個標籤對應多個輸入組件，這個需求很常見但在官方例子沒看到合適的，因爲官方建議：

注意：一個 Form.Item 建議只放一個被 getFieldDecorator 裝飾過的 child，當有多個被裝飾過的 child 時，help required validateStatus 無法自動生成。

經過摸索，證實這樣寫是可行的，如下：

<FormItem
        {...formItemLayout}
        label={'主要股東'}
    >
        <Row gutter={30}>
            <Col span={8}>
                {this.props.form.getFieldDecorator('shareholderName2', {
                    rules: [{ required: true, message: '請輸入股東名稱' }],
                })(<Input placeholder={'請輸入股東名稱'} />)}
            </Col>
            <Col span={8}>
                <FormItem>
                    {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: '請輸入正確的持股比例',
                        }],
                    })(<Input addonAfter={'%'} placeholder={'請保留一位小數'}/>)}
                </FormItem>
            </Col>
        </Row>
    </FormItem>

方法就是用antd的柵格佈局來控制排列，在後面的輸入組件用FormItem再包一層，這樣校驗位置也正確，簡直不要太爽。效果如圖：