javascript - ReactJS 未捕获类型错误 : Cannot read property 'target' of undefined

标签 javascript reactjs

你好我是新来的 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/

相关文章:

javascript - 分割 youtube 视频 url

javascript - 为什么当函数调用中的参数计数与函数声明的参数计数不匹配时,javascript不会提示?

javascript - 函数式编程如果

javascript - Next JS 如何导入自定义字体?

javascript - 将自定义变量添加到 jquery 数据表并读取搜索过滤器

reactjs - ReactNative.createClass 已弃用,请使用 "React"包中的 React.createClass 代替

javascript - 如何在 react.js 中使组件在滚动时显示/隐藏

javascript - React JS - ESLint - 忽略具有 UNSAFE_componentWillMount、UNSAFE_componentWillUpdate 和 UNSAFE_componentWillReceiveProps 的组件的规则

javascript - 当从其他组件分派(dispatch)操作时触发函数

javascript - 从保存的文本区域 react 显示换行符