![Adress]( "Adress")
本文介绍了Antd如何将getFieldDecorator传递给子组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 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传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！