React form onSubmit関数でスコープが設定されていないのはなぜですか？私のリアクトコンポーネントで

Question

は、私は、フォームのonSubmit検証を使用する場合this.propsがスコープ内にないいくつかの理由をonSubmit機能

<form className="form-horizontal" name="taskForm" onSubmit={this.submitTask}>

submitTask(e) { 

    e.preventDefault(); 
    console.log(this.props); // undefined 
    console.log(this) // window object 
} 

とフォームを持っています。コンストラクター内のI console.log(this.props)を実行すると、propsは正常にログアウトします。

I console.log(this)これはウィンドウオブジェクトです。どのように反応成分の範囲を取得するのですか？

Answer 1

あなたは、たとえば、他のコンポーネントのイベントを使用する場合、これと同様の振る舞いはあなたがわかりますので、これはノートでは、それについてそこにあるドキュメントで（onClickの、のonChange、をonSubmit）

、より広範な問題です：

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

メソッドは、通常のES6クラスと同じセマンティクスに従います。つまり、メソッドは自動的にこれをインスタンスにバインドしません。 .bind（this）または矢印関数=>を明示的に使用する必要があります。

説明したように、これらの方法をバインドするか、矢印機能を使用する必要があります。 バインディングを選択すると、コンストラクタでバインドすることも、レンダリングされたコンポーネントで厳密にバインドすることもできます。レンダリングコンポーネントで

constructor(props) { 
    super(props); 
    this.submitTask = this.submitTask.bind(this); 
} 

：コンストラクタで

<form className="form-horizontal" name="taskForm" onSubmit={e => { 
    e.preventDefault(); 
    console.log(this.props); // undefined 
    console.log(this) // window object 
}}>