Question

你好，我是新来的反应者，尝试创建简单的登录形式，（当用户提供特殊的用户名和密码时，它显示特殊的类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;

我不知道出什么问题了（正如我说的，我刚刚开始做出反应），如果有人能够解决这个问题，我将很高兴

Answer 1

将此this.handlePasswordChange().bind(this)更改为this.handlePasswordChange.bind(this)

Answer 2

我知道这不是标题中出现问题的直接原因（已成功回答），但是我想指出的是代码中的其他问题可能会对您有所帮助。

第一个是submit（）函数中的三元运算。这些不会在那里那样工作。可行的是：


  submit(e) {
    e.preventDefault();
    if (this.state.username === 'justusername' && this.state.password !== 'justpassword') {
      return <PasswordIncorrect password={this.state.password} />;
    }
    if (this.state.username !== 'justusername' && this.state.password === 'justpassword') {
      return <UsernameIncorrect username={this.state.username} />;
    }
    if (this.state.username !== 'justusername' && this.state.password !== 'justpassword') {
      return <BothIncorrect />;
    }

    return <Ok />;
  }

但是作为表单提交功能，这没有太大意义-不会将这些组件添加到您的页面中。更好的做法是在您的状态下设置错误消息-根据每个错误消息进行更新并将其呈现到页面上。例如：

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { errorMessage: '', password: '', username: '' };
    this.handleTextChange = this.handleTextChange.bind(this);
    this.submit = this.submit.bind(this);
  }

  handleTextChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  submit(e) {
    e.preventDefault();
    if (this.state.username === 'justusername' && this.state.password !== 'justpassword') {
      this.setState({errorMessage: 'Password incorrect'});
    }
    if (this.state.username !== 'justusername' && this.state.password === 'justpassword') {
      this.setState({errorMessage: 'Username incorrect'});
    }
    if (this.state.username !== 'justusername' && this.state.password !== 'justpassword') {
      this.setState({errorMessage: 'Both incorrect'});
    }
  }

  render() {
    return (
      <form onSubmit={this.submit}>
        {/* Note the error message rendered here */}
        {this.state.errorMessage}
        <input name="username" type="text" placeholder="username" onChange={this.handleTextChange} />
        <input name="password" type="password" placeholder="password" onChange={this.handleTextChange} />
        <button type="submit">Zaza</button>
      </form>
    );
  }
}

export default App;

ReactJS未捕获的TypeError：无法读取未定义的属性“目标”

2 个答案: