Antd how to pass the getFieldDecorator to sub component

问题

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.

antd version: 2.11.0

react version: 15.5.4

Below is my example.

Form component:

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;

Address component

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;

回答1:

Just pass form to Adress

Form component:

class BaseForm extends React.Component {
  render() {
    const {form} = this.props
    return (
      <Form onSubmit={this.handleSubmit}>
        <Address form={form}/>
      </Form>
    )

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

Address.jsx:

const Address = ({form: {getFieldDecorator}}) =>
  <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

来源：https://stackoverflow.com/questions/44672052/antd-how-to-pass-the-getfielddecorator-to-sub-component