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