我正在尝试使用mdb react实现反应多步注册,但是出现错误:
元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记了从定义文件中导出组件,或者可能混淆了默认导入和命名导入。
我使用Github和Stack Overflow以不同的方式尝试解决了此问题,但是我在代码中找不到问题。
这是我的代码:
import React,{Component} from 'react'
import {Container,Step,Row,Col,Stepper,Input,Button} from 'mdbreact'
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
formActivePanel2: 1,
formActivePanel2Changed: false,
}
}
swapFormActive = (a) => (param) => (e) => {
this.setState({
['formActivePanel' + a]: param,
['formActivePanel' + a + 'Changed']: true
});
}
handleNextPrevClick = (a) => (param) => (e) => {
this.setState({
['formActivePanel' + a] : param,
['formActivePanel' + a + 'Changed']: true
});
}
handleSubmission = () => {
alert('Form submitted!');
}
calculateAutofocus = (a) => {
if (this.state['formActivePanel'+a+'Changed']) {
return true
}
}
render() {
return(
<Container>
<Row className="pt-5 justify-content-center">
<Col md="2" className="pl-5 pl-md-0 pb-5">
<Stepper icon vertical>
<Step icon="folder-open-o" stepName="Basic Information" onClick={this.swapFormActive(2)(1)} vertical></Step>
<Step icon="pencil" stepName="Personal Data" onClick={this.swapFormActive(2)(2)} vertical></Step>
<Step icon="photo" stepName="Terms and Conditions" onClick={this.swapFormActive(2)(3)} vertical></Step>
<Step icon="check" stepName="Finish" onClick={this.swapFormActive(2)(4)} vertical></Step>
</Stepper>
</Col>
<Col md="7">
{ this.state.formActivePanel2 == 1 &&
(<Col md="12">
<h3 className="font-weight-bold pl-0 my-4">
<strong>Basic Information</strong></h3>
<Input label="Email" className="mt-4" autoFocus={this.calculateAutofocus(2)}/>
<Input label="Username" className="mt-4"/>
<Input label="Password" className="mt-4"/>
<Input label="Repeat Password" className="mt-4"/>
<Button color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(2)(2)}>next</Button>
</Col>)}
{ this.state.formActivePanel2 == 2 &&
(<Col md="12">
<h3 className="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
<Input label="First Name" className="mt-3" autoFocus={this.calculateAutofocus(2)}/>
<Input label="Second Name" className="mt-3"/>
<Input label="Surname" className="mt-3"/>
<Input label="Address" type="textarea" rows="2"/>
<Button color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(2)(1)}>previous</Button>
<Button color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(2)(3)}>next</Button>
</Col>)}
{ this.state.formActivePanel2 == 3 &&
(<Col md="12">
<h3 className="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
<Input label="I agreee to the terms and conditions" type="checkbox" id="checkbox3" autoFocus={this.calculateAutofocus(2)} />
<Input label="I want to receive newsletter" type="checkbox" id="checkbox4" />
<Button color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(2)(2)}>previous</Button>
<Button color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(2)(4)}>next</Button>
</Col>)}
{ this.state.formActivePanel2 == 4 &&
(<Col md="12">
<h3 className="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
<h2 className="text-center font-weight-bold my-4">Registration completed!</h2>
<Button color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(2)(3)}>previous</Button>
<Button color="success" rounded className="float-right" onClick={this.handleSubmission}>submit</Button>
</Col>)}
</Col>
</Row>
</Container>
)
}
}
export default Main
答案 0 :(得分:2)
您要将组件Main
导出为default
,并且在使用此Main
组件的组件中,将其导入为import {Main} from path/Main.js
。因此,只需进行更改到import Main from path/Main.js
。
更新:
swapFormActive = (a,param,e) => {
this.setState({
['formActivePanel' + a]: param,
['formActivePanel' + a + 'Changed']: true
});
}
handleNextPrevClick = (a,param,e) => {
this.setState({
['formActivePanel' + a] : param,
['formActivePanel' + a + 'Changed']: true
});
}
...
<Step icon="check" stepName="Finish" onClick={(e)=>this.swapFormActive(2,4,e)} vertical></Step>
<Button color="mdb-color" rounded className="float-right" onClick={(e)=>this.handleNextPrevClick(2,2,e)}>next</Button>