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

问题描述

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

antd 版本:2.11.0

反应版本:15.5.4

下面是我的例子.

表单组件:

从'react'导入React；导入 { 表单，输入，选择 } from 'antd';从../common/Address"导入地址const FormItem = Form.Item;const formItemLayout = {标签列:{xs:{跨度:24}，SM:{跨度:6}},包装颜色:{xs:{跨度:24}，SM:{跨度:14}}};const 选项 = Select.Option;class BaseForm 扩展 React.Component {构造函数(道具){超级(道具)；this.handleChange = this.handleChange.bind(this);}句柄变化(值){console.log(`选定的 ${value}`);}handleSubmit = (e) =>{e.preventDefault();this.props.form.validateFields((err, values) => {如果(！错误){console.log('收到的表单值:', values);}});}使成为() {const { getFieldDecorator } = this.props.form;返回(<Form onSubmit={this.handleSubmit}><地址/></表格>)}}const CommonForm = Form.create()(BaseForm);导出默认 CommonForm；

地址组件

从'react'导入React；导入 { 表单，输入，选择 } from 'antd';const FormItem = Form.Item;const formItemLayout = {标签列:{xs:{跨度:24}，SM:{跨度:6}},包装颜色:{xs:{跨度:24}，SM:{跨度:14}}};const 选项 = Select.Option;类地址扩展 React.Component {构造函数(道具){超级(道具)；this.handleChange = this.handleChange.bind(this);}句柄变化(值){console.log(`选定的 ${value}`);}使成为() {const { getFieldDecorator } = this.props.form;返回 (<div><FormItem {...formItemLayout} label="Country" hasFeedback>{getFieldDecorator('国家', {初始值:'美国'，规则:[{required: true, message: '请输入您的国家！'}]})(<选择样式={{width: 150}} onChange={this.handleChange}><Option value='US'>美国</Option><Option value='CA'>加拿大</Option>)}</FormItem><FormItem {...formItemLayout} label="State" hasFeedback>{getFieldDecorator('state', {初始值:'CA'，规则:[{required: true, message: '请输入您的状态！'}]})(<选择样式={{width: 150}} onChange={this.handleChange}><Option value='CA'>CA</Option><Option value='IA'>IA</Option>)}</FormItem>

);}}导出默认地址；

解决方案

只需将表单传递给 Adress

表单组件:

class BaseForm 扩展 React.Component {使成为() {const {form} = this.props返回 (<Form onSubmit={this.handleSubmit}><地址表格={表格}/></表格>)}}const CommonForm = Form.create()(BaseForm)导出默认 CommonForm

Address.jsx:

const 地址 = ({form: {getFieldDecorator}}) =><div><FormItem {...formItemLayout} label="Country" hasFeedback>{getFieldDecorator(`国家`，{初始值:`美国`，规则:[{required: true, message: `请输入你的国家！`}]})(<选择样式={{width: 150}} onChange={this.handleChange}><Option value='US'>美国</Option><Option value='CA'>加拿大</Option>)}</FormItem><FormItem {...formItemLayout} label="State" hasFeedback>{getFieldDecorator(`state`, {初始值:`CA`，规则:[{required: true, message: `请输入你的状态！`}]})(<选择样式={{width: 150}} onChange={this.handleChange}><Option value='CA'>CA</Option><Option value='IA'>IA</Option>)}</FormItem>

导出默认地址

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;

解决方案

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

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