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>
);
}
}
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.
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.
please export your component like
export default Form.create()(RegistrationForm)