Antd如何将getFieldDecorator传递给子组件 [英] Antd how to pass the getFieldDecorator to sub component

问题描述

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

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

推荐答案

只需将表单传递给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

这篇关于Antd如何将getFieldDecorator传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！