の理由バインド(これ)を使用する必要があり、イベントハンドラに反応(ターン)

1.JavaScript独自の特徴を説明
これは内部メソッドを、この時点で失われた場合は、呼び出された()、関数名によって、変数に関数名を渡した場合。
サンプルコード:
まず、テストオブジェクトを作成し、直接メソッドを呼び出します。

テスト= {CONST
名: 'ジャック'、
のgetName:関数(){
にconsole.log(this.name)
}
}
test.getName()
。1
2
。3
。4
。5
。6
。7
上記のコードを使用して、ノードが通常の出力ジャックをtest.js実行することができます。
その後、我々はコードの調整を行います。

テスト= {CONST
名: 'ジャック'、
getJack:関数(){
にconsole.log(this.name)
}
}
CONST FUNC = test.getJack;
FUNC();
1
2
3。
4。
5。
6。
7。
8。
我々はオブジェクトを直接呼び出すことはありませんHTMLに埋め込まれた方法が、実行環境は、JSファイルノードのノード関連情報を使用している場合、中間変数()メソッドの呼び出しが、この点は、出力が不定、失われた後の中間変数にメソッド宣言は、出力されますこれは、ウィンドウオブジェクトを指します。

2.Reactイベントバインディングは
ケース中間変数をonclickの、すなわち、:イベント配信にJSXが文字列が、関数(のonClick = {this.handleClick}など)ではない、上記の原理に一致する結合反応させので、この時点のハンドラが失われます。この問題を解決するために、イベントハンドラは渡されたかに関係なく、この点はオブジェクトの現在のインスタンスがあるように、関数のバインド(これを)呼び出すことときです。
あなたがバインドを(これ)を使用したくない場合はもちろん、私たちは、矢印関数の機能を宣言するときに変数に関数の内容を返します使用し、これを直接呼び出す。変数名を使用することができます。次のようにサンプル・コードは次のとおりです。

;インポートから反応'REACT'
React.Component {延びエクスポートデフォルトクラスライフ
コンストラクタ(小道具){
スーパー(小道具);
this.state = {
COUNT :. 4
;}
}
レンダリング(){
VARのスタイル= {
'10pxの':パディング、
カラー:「赤」、
のfontSize:「30px」
}
リターン(
<divのスタイルスタイル= {}> {/ *注JS {}構文2つのブラケットスタイルで、ブラケットを表すために使用されるが、実際にオブジェクトの理由であります* /}
<P>ライフサイクルが</ P>で説明リアクト
<ボタンのonClick = {} this.handleAdd> </ボタン>クリック結合しない
クリックで結合<ボタンのonClick = {(本)} this.handleClick.bind> </ボタン>
<P> {this.state.count} </ P>
</ div>

}
//この時点で、これはオブジェクトの現在のインスタンスである
handleAdd =()=> {
にconsole.log(本)
this.setState({
COUNT :. 5
})
}
handleClick(){
this.setState({
COUNT :. 6
})
}
}
---------------------
本文:この記事は王浙江省_Jackのオリジナルの記事、再現CC BY-SA 4.0の著作権契約を、続くCSDNブロガー」で、オリジナルのソースリンクと、この文を添付してください。
オリジナルリンクします。https://blog.csdn.net/qq_34829447/article/details/81705977

おすすめ

転載: www.cnblogs.com/zlintokyo/p/11315705.html