ReactJSとFirebaseにログインした後、エラー情報を空欄に追加してリダイレクトする方法は？

Question

私はreact js、react-router、およびfirebaseデータベースを使用します。そして私は、ログインフィールドが空の場合、エラー情報を追加したいと成功場合、私はダッシュボードにリダイレクトするようにしたいが、それは、ログインしてrouter.js

<Route path="/" name="Home" component={Simple}> 
    <IndexRoute component={Login}/> 
    </Route> 
    <Route path="/dashboard" name="Home" component={Full}> 
     <IndexRoute component={Dashboard}/> 
     <Route path="/dashboard" name="Dashboard" component={Dashboard}/> 
    </Route> 

で

このコードこのコードは動作しません。 JS

function setErrorMsg(error) { 
     return { 
     loginMessage: error 
     } 
    } 

    class Login extends Component { 
     state = { loginMessage: null } 
     handleSubmit = (e) => { 
     e.preventDefault() 
     login(this.email.value, this.password.value) 
      .catch((error) => { 
       this.setState(setErrorMsg('Invalid username/password.')) 
      }) 
     } 
     resetPassword =() => { 
     resetPassword(this.email.value) 
      .then(() => this.setState(setErrorMsg(`Password reset email sent to ${this.email.value}.`))) 
      .catch((error) => this.setState(setErrorMsg(`Email address not found.`))) 
     } 
     render() { 
     return (
     <h1>Login</h1> 
      <form onSubmit={this.handleSubmit}> 
      <div className="input-group mb-3"> 
      <span className="input-group-addon"><i className="icon-user"></i></span> 
      <input type="text" ref={(email) => this.email = email} className="form-control" placeholder="Email"/> 
      </div> 
      <div className="input-group mb-4"> 
      <span className="input-group-addon"><i className="icon-lock"></i></span> 
     <input type="password" ref={(password) => this.password = password} className="form-control" placeholder="Password"/> 
     </div> 
     { 
      this.state.loginMessage && 
      <div> 
      <span className="sr-only">Error:</span> 
      &nbsp;{this.state.loginMessage} <a href="#" onClick={this.handleSubmit} className="alert-link">Forgot Password?</a> 
      </div> 
     } 
     <button type="button" className="btn btn-primary px-4">Login</button> 
     <button type="button" className="btn btn-link px-0">Forgot password?</button> 

    </form> 

    ); 
    } 
} 

Answer 1

クイック考えたのは、あなたが<form onSubmit={this.handleSubmit.bind(this)}>のように、あなたをonSubmitをバインドする必要があるということです。

class ... extendsを使用すると、自動結合が行われません。

私はそれをしたいもう一つの方法は、私のコンストラクタ関数にバインドすることです。

class Login extends Component { 
    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 
// your code here 
}