reactjs - getFieldDecorator をサブコンポーネントに渡す Antd の方法

Question

反応ライブラリとしてantdを使用しました。フォームについては、いくつかのフォーム フィールドを再利用して、それらのフィールドをサブ コンポーネントとして作成したいと考えています。私の例では、それは住所です。私の質問は、フォーム プロパティが Form.create によって装飾されているため、getFieldDecorator をサブ コンポーネント Address に渡す方法です。

バージョン: 2.11.0

反応バージョン: 15.5.4

以下は私の例です。

フォーム コンポーネント:

import React from 'react';
import { Form, Input, Select } from 'antd';
import Address from '../common/Address'

const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 6}
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 14}
    }
};

const Option = Select.Option;

class BaseForm extends React.Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(value) {
        console.log(`selected ${value}`);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return(
            <Form  onSubmit={this.handleSubmit}>
                <Address />
            </Form>
        )

    }
}
const CommonForm = Form.create()(BaseForm);
export default CommonForm;

住所コンポーネント

import React from 'react';
import { Form, Input, Select } from 'antd';

const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 6}
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 14}
    }
};

const Option = Select.Option;



class Address extends React.Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(value) {
        console.log(`selected ${value}`);
    }

    render() {
        const { getFieldDecorator } = this.props.form;

        return (
            <div>
                <FormItem {...formItemLayout} label="Country" hasFeedback>
                        {getFieldDecorator('country', {
                            initialValue: 'US',
                            rules: [{required: true, message: 'Please input your country!'}]
                        })(
                            <Select style={{width: 150}} onChange={this.handleChange}>
                                <Option value='US'>United States</Option>
                                <Option value='CA'>Canada</Option>
                            </Select>
                        )}
                </FormItem>

                <FormItem {...formItemLayout} label="State" hasFeedback>
                        {getFieldDecorator('state', {
                            initialValue: 'CA',
                            rules: [{required: true, message: 'Please input your state!'}]
                        })(
                            <Select style={{width: 150}} onChange={this.handleChange}>
                                <Option value='CA'>CA</Option>
                                <Option value='IA'>IA</Option>
                            </Select>
                        )}
                </FormItem>
                 </div>
        );
    }
}
export default Address;