記述方法: 1. "onClick={this.handleClick}" を使用する; 2. "onClick={this.handleClick.bind(this)}" を使用する; 3. "{(params)=>" を使用する; this.handleClick(params)}"。
このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。
本題に移りましょう。まず、ボタンのイベントを記述する正しい方法を直接示しましょう:
ボタンに追加 onclick イベントを記述する正しい方法
// handleClick は
onClick = { this.handleClick }
// handleClick用箭头函数定义时,为onClick添加事件应该这么写:handleClick は次のように定義されます:
handleClick = () => { // do something here};ログイン後にコピー
または
// handleClick が使用されます(通常の関数) 定義
onClick = { this.handleClick .bind(this) }
// handleClick用普通函数定义时,为onClick添加事件应该这么写:
handleClick は次のように定義されます:
handleClick () { // do something here }
// handleClick は < アロー関数>/(通常の関数) を定義できます
onClick = { (params) => this.handleClick(params) }
// handleClick可以是箭头函数,也可以是普通函数
なぜこのように書くことが正しいのかを分析しましょう :
この問題を理解するには、次の文を理解してください:
アロー関数は、独自の this を持たないため、定義時のコンテキストの this
になります。通常の関数には独自の this があるため、this は次のようになります。実行時のコンテキストの
まずは見てみましょう 最初の書き方:
以下のコードは次のとおりです: ボタンの onclick イベントを追加します (完全な JSX)
// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component { // 2. 定义handleClick事件 handleClick = () => { console.log(this); //3. this指向examplePage } render() { return (// 1. 为onClick绑定 handleClick事件处理函数
) }}export default examplePage;
ボタンをクリックしてこれを出力します:
this: examplePage {props: Object, context: {}, refs: {}, updater: Object , state: {}, …}
分析:
まず、bind(this) が使用されていない場合に、console.log(this) が出力する内容を見てみましょう:
// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component { // 2. !将箭头函数改为普通函数 handleClick () { console.log(this); // 3. this 为 undefined } render() { return (// 1. 为onClick绑定 handleClick事件处理函数
) }}export default examplePage;
ボタンをクリックして、これを出力します:
これ: 未定義
分析:
注: 厳密なバージョンでは、デフォルトではこれはありません。その後、ウィンドウがありますが、未定義です
モジュール コードは常に厳密モード コードです。
ClassDeclaration または ClassExpression のすべての部分は厳密モード コードです。
したがって、このポインターを変更するにはバインドを使用する必要があります。つまり:
render() { return (// 用bind改变this指向
)}
分析:
上の 2 つを理解すると、最後の 1 つは理解しやすいです。
render() { return (// 通过箭头函数传参
)}
分析:
次に、パラメーターが渡されない場合は、次のように記述します。
しかしこれは実現不可能です はい、react は () => this.handleClick() を直接解析するため、handleClick が呼び出されます。これは onClick = "handleClick を呼び出した結果" と同等です
つまり、パラメータが渡されない場合にのみ、このように書くことができます。 :
概要
最初の 3 つの質問には答えることができます
//定义handleClick事件 handleClick = () => { // do something here }; //为onClick绑定handleClick事件处理函数 // 不传参 // 传参
推荐学习:《react视频教程》
以上が反応クリック イベントを記述する方法はいくつかありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。