Я использую регистрационную форму ant design UI. Я только что скопировал и вставил его, но в консоли Chrome я столкнулся с этой странной ошибкой, потому что я не изменил antd.min.js:
antd.min.js:23 Uncaught TypeError: Cannot read property 'Component' of undefined
at Object.<anonymous> (antd.min.js:23)
at t (antd.min.js:7)
at Object.<anonymous> (antd.min.js:31)
at t (antd.min.js:7)
at Object.<anonymous> (antd.min.js:50)
at t (antd.min.js:7)
at Object.<anonymous> (antd.min.js:7)
at t (antd.min.js:7)
at antd.min.js:7
at antd.min.js:7
(anonymous) @ antd.min.js:23
t @ antd.min.js:7
(anonymous) @ antd.min.js:31
t @ antd.min.js:7
(anonymous) @ antd.min.js:50
t @ antd.min.js:7
(anonymous) @ antd.min.js:7
t @ antd.min.js:7
(anonymous) @ antd.min.js:7
(anonymous) @ antd.min.js:7
(anonymous) @ antd.min.js:7
(anonymous) @ antd.min.js:7
index.html выглядит так:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>React Project</title>
<link href="/assets/stylesheet/antd.min.css" rel="stylesheet" type="text/css">
<link href="/assets/stylesheet/stylesheet.css" rel="stylesheet" type="text/css">
<script src="/assets/antd.min.js"></script>
</head>
<body>
<div id="main">
<div id="registration"></div>
</div>
<script src="/build/bundle.js"></script>
</body>
</html>
registration.js выглядит так:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {
Form,
Input,
Tooltip,
Icon,
Cascader,
Select,
Row,
Col,
Checkbox,
Button,
AutoComplete
} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;
export default class RegistrationForm extends Component {
constructor(props) {
super(props);
this.state = {
confirmDirty: false,
autoCompleteResult: []
};
}
handleSubmit(e) {
console.log('i\'m here');
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
});
}
compareToFirstPassword(rule, value, callback) {
const form = this.props.form;
if (value && value !== form.getFieldValue('password')) {
callback('Two passwords that you enter is inconsistent!');
} else {
callback();
}
}
validateToNextPassword(rule, value, callback) {
const form = this.props.form;
if (value && this.state.confirmDirty) {
form.validateFields(['confirm'], {force: true});
}
callback();
}
handleWebsiteChange(value) {
let autoCompleteResult;
if (!value) {
autoCompleteResult = [];
} else {
autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
}
this.setState({autoCompleteResult});
}
render() {
const {getFieldDecorator} = this.props.form;
const {autoCompleteResult} = this.state;
const formItemLayout = {
labelCol: {
xs: {
span: 24
},
sm: {
span: 8
}
},
wrapperCol: {
xs: {
span: 24
},
sm: {
span: 16
}
}
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0
},
sm: {
span: 16,
offset: 8
}
}
};
const prefixSelector = getFieldDecorator('prefix', {initialValue: '98'})(<Select style={{
width: 70
}}>
<Option value="98">+98</Option>
</Select>);
const websiteOptions = autoCompleteResult.map(website => (<AutoCompleteOption key={website}>{website}</AutoCompleteOption>));
return (
<Form className="RegistrationForm" onSubmit={this.handleSubmit}>
<FormItem {...formItemLayout} 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/>)
}
</FormItem>
<FormItem {...formItemLayout} label="Password">
{
getFieldDecorator('password', {
rules: [
{
required: true,
message: 'Please input your password!'
}, {
validator: this.validateToNextPassword
}
]
})(<Input type="password"/>)
}
</FormItem>
<FormItem {...formItemLayout} label="Confirm Password">
{
getFieldDecorator('confirm', {
rules: [
{
required: true,
message: 'Please confirm your password!'
}, {
validator: this.compareToFirstPassword
}
]
})(<Input type="password" onBlur={this.handleConfirmBlur}/>)
}
</FormItem>
<FormItem {...formItemLayout} label="Phone Number">
{
getFieldDecorator('phone', {
rules: [
{
required: true,
message: 'Please input your phone number!'
}
]
})(<Input addonBefore={prefixSelector} style={{
width: '100%'
}}/>)
}
</FormItem>
<FormItem {...formItemLayout} label="Website">
{
getFieldDecorator('website', {
rules: [
{
required: true,
message: 'Please input website!'
}
]
})(<AutoComplete dataSource={websiteOptions} onChange={this.handleWebsiteChange} placeholder="website">
<Input/>
</AutoComplete>)
}
</FormItem>
<FormItem {...formItemLayout} label="Captcha" extra="We must make sure that your are a human.">
<Row gutter={8}>
<Col span={12}>
{
getFieldDecorator('captcha', {
rules: [
{
required: true,
message: 'Please input the captcha you got!'
}
]
})(<Input/>)
}
</Col>
<Col span={12}>
<Button>Get captcha</Button>
</Col>
</Row>
</FormItem>
<FormItem {...tailFormItemLayout}>
<Button type="primary" htmlType="submit" onClick={this.handleSubmit}>Register</Button>
</FormItem>
</Form>
);
}
}
main.js содержит:
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
const WrappedRegistrationForm = Form.create()(RegistrationForm);
ReactDOM.render(<WrappedRegistrationForm />, document.getElementById('main'));
Как я могу это решить?
