蚂蚁设计:getFieldDecorator() [英] Ant Design : getFieldDecorator()
本文介绍了蚂蚁设计:getFieldDecorator()的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
import {
Form, Input, Tooltip, Icon
} from 'antd';
import React , {Component }from 'react';
import ReactDOM from 'react-dom';
export default class RegistrationForm extends Component {
state = {
confirmDirty: false,
autoCompleteResult: [],
};
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
handleConfirmBlur = (e) => {
const value = e.target.value;
this.setState({ confirmDirty: this.state.confirmDirty || !!value
});
}
render() {
console.log(this.props.form)
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
return (
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
<Form.Item
label="E-mail"
>
{getFieldDecorator('email', {
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}],
})(
<Input />
)}
</Form.Item>
<Form.Item
label={(
<span>
Nickname
<Tooltip title="What do you want others to call you?">
<Icon type="question-circle-o" />
</Tooltip>
</span>
)}
>
{getFieldDecorator('nickname', {
rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
})(
<Input />
)}
</Form.Item>
</Form>
);
}
}
我正在使用ant design
,但是运行此代码时会显示this.props.form is undefined
.在这一行中,当我在render
函数中声明getFieldDecorator
时.
I am using ant design
but when I run this code it says this.props.form is undefined
. In this line when I declare getFieldDecorator
in render
function.
请告诉这些道具从何而来以及如何使用?我没有任何传递任何prop
的父组件.帮助修复它.预先感谢.
Please tell from where are these props coming and how to use it ? I do not have any parent component that is passing any prop
. help fix it. thanks in advance.
推荐答案
请像这样导出您的组件
export default Form.create()(RegistrationForm)
这篇关于蚂蚁设计:getFieldDecorator()的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文