title: Antd how to pass the getFieldDecorator to sub component
body: <p>I have used antd as react lib. And for form, I want to reuse some form fields and make those fields as sub component. In my example it's Address. My question is how to pass the getFieldDecorator to sub component Address, as  form property has been decorated by Form.create.</p>
  
  <p><strong>antd version: 2.11.0</strong></p>
  
  <p><strong>react version: 15.5.4</strong></p>
  
  <p>Below is my example. </p>
  
  <p><strong>Form component:</strong></p>
  
  <pre><code>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) =&gt; {
          e.preventDefault();
          this.props.form.validateFields((err, values) =&gt; {
              if (!err) {
                  console.log('Received values of form: ', values);
              }
          });
      }
  
      render() {
          const { getFieldDecorator } = this.props.form;
          return(
              &lt;Form  onSubmit={this.handleSubmit}&gt;
                  &lt;Address /&gt;
              &lt;/Form&gt;
          )
  
      }
  }
  const CommonForm = Form.create()(BaseForm);
  export default CommonForm;
  </code></pre>
  
  <p><strong>Address component</strong></p>
  
  <pre><code>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 (
              &lt;div&gt;
                  &lt;FormItem {...formItemLayout} label="Country" hasFeedback&gt;
                          {getFieldDecorator('country', {
                              initialValue: 'US',
                              rules: [{required: true, message: 'Please input your country!'}]
                          })(
                              &lt;Select style={{width: 150}} onChange={this.handleChange}&gt;
                                  &lt;Option value='US'&gt;United States&lt;/Option&gt;
                                  &lt;Option value='CA'&gt;Canada&lt;/Option&gt;
                              &lt;/Select&gt;
                          )}
                  &lt;/FormItem&gt;
  
                  &lt;FormItem {...formItemLayout} label="State" hasFeedback&gt;
                          {getFieldDecorator('state', {
                              initialValue: 'CA',
                              rules: [{required: true, message: 'Please input your state!'}]
                          })(
                              &lt;Select style={{width: 150}} onChange={this.handleChange}&gt;
                                  &lt;Option value='CA'&gt;CA&lt;/Option&gt;
                                  &lt;Option value='IA'&gt;IA&lt;/Option&gt;
                              &lt;/Select&gt;
                          )}
                  &lt;/FormItem&gt;
                   &lt;/div&gt;
          );
      }
  }
  export default Address;
  </code></pre>