reactjs - Antd如何将getFieldDecorator传递给子组件

Question

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

antd版本:2.11.0

react 版本: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

只需将表单传递到地址

表单组件:

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

地址.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