你好我是新来的 react 并尝试创建像表单一样的简单登录,(当用户提供特殊的用户名和密码时它显示特殊类 Ok 并提供一些文本,但如果用户输入错误的密码和/或用户名它显示特殊类,但它给了我标题错误。所以这里是代码
import React, {Component} from 'react'
class App extends Component{
constructor(props){
super(props);
this.state = {password: '', username: ''}
this.handleTextChange = this.handleTextChange.bind(this)
this.handlePasswordChange = this.handlePasswordChange().bind(this)
this.submit = this.submit.bind(this)
}
handleTextChange(e){
this.setState({username: e.target.value})
}
handlePasswordChange(e){
this.setState({password: e.target.value})
}
submit(e){
(this.state.username === 'justusername' && this.state.password !==
'justpassword') ? <PasswordIncorrect password={this.state.password} />:
null;
(this.state.username !== 'justusername' && this.state.password ===
'justpassword') ? <UsernameIncorrect username={this.state.username} />:
null;
(this.state.username !== 'justusername' && this.state.password !==
'justpassword') ? < BothIncorrect /> : null;
<Ok />
e.preventDefault()
}
render(){
return(
<form onSubmit={this.submit}>
<input type="text" placeholder="username" onChange={this.handleTextChange}
/>
<input type="password" placeholder="password" onChange=
{this.handlePasswordChange} />
<button type="submit">Zaza</button>
</form>
)
}
}
class UsernameIncorrect extends Component{
render(){
return(
<div>username -> {this.props.username} is incorrect</div>
)
}
}
class PasswordIncorrect extends Component{
render(){
return(
<div>password-> {this.props.password} is incorrect</div>
)
}
}
class BothIncorrect extends Component{
render(){
return(
<div>both incorrect</div>
)
}
}
class Ok extends Component{
render(){
const style = {
backgroundColor: 'red'
}
return(
<div style={style}>answer -> + {1*5}</div>
)
}
}
export default App;
我不知道有什么问题(正如我所说的,我刚刚开始使用react),如果有人能解决这个问题,我会很高兴
最佳答案
将此 this.handlePasswordChange().bind(this)
更改为 this.handlePasswordChange.bind(this)
关于javascript - ReactJS 未捕获类型错误 : Cannot read property 'target' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54616804/