React：これはイベントハンドラではnullです

Question

私はLoginFormコンポーネントを持っています。提出する前に、loginNameとpasswordの両方が設定されていることを確認します。 thisがnullであることを言って、

class LoginForm extends Component { 

    constructor() { 
    super(); 

    this.state = { 
     error: "", 

     loginName: "", 
     password: "", 
     remember: true 
    }; 
    } 


    submit(e) { 
    e.preventDefault(); 
    if(!this.state.loginName || !this.state.password) { //this is null 
     this.setState({ error: "Fill in both fields" }); 
    } else { 
     console.log("submitting form"); 
    } 
    } 

    render() { 
    return (
     <div className="col-xs-12 col-sm-6 col-md-4"> 
     <form className="login" onSubmit={this.submit}> 
      <button type="submit" className="btn btn-default">Sign in</button> 
     </form> 
     </div> 
    ); 
    } 
} 

export default LoginForm; 

しかし、私は、イベントハンドラでTypeErrorを得る：私はこのコード（省略多くのもの）を試してみました。

私は何をしていますか？

Answer 1

はあなたが.bind

onSubmit={ this.submit.bind(this) } 

Example

を使用するかはarrow function

onSubmit={ (e) => this.submit(e) } 

Exampleを使用することができ、この操作のために今thisは、undefinedあるのでsubmit方法のためthisを設定する必要があります

Answer 2

リアクションはこれまでのバインディングコールバックでした。構文です

onSubmit={::this.submit} 

：しかし、今、それがなくなって、あなたはそれを自分で結合するか、またはバベルを使用している人のために

onSubmit={() => this.submit()} 

Answer 3

のようなラッパーをしなければならないが、あなたはtransform-function-bindプラグインでbind operatorを使用することができます砂糖のために：

onSubmit={this.submit.bind(this)}