Antd如何将getFieldDecorator传递给子组件

Question

我已经使用antd作为反应lib。而对于表单，我想重用一些表单域并将这些域作为子组件。在我的例子中是Address。我的问题是如何将getFieldDecorator传递给子组件地址，因为form属性已被Form.create装饰。

antd版本：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; 

Answer 1

只是通过形式Adress

表单组件：

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