反応クリック イベントを記述する方法はいくつかありますか?

記述方法: 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添加事件应该这么写：<Button onClick = { this.handleClick }></Button></p>
<p>handleClick は次のように定義されます: </p>
<pre class="brush:php;toolbar:false">handleClick = () => { // do something here};

または

// handleClick が使用されます(通常の関数) 定義
onClick = { this.handleClick .bind(this) }

// handleClick用普通函数定义时，为onClick添加事件应该这么写：<Button onClick = { this.handleClick.bind(this) }></Button>

handleClick は次のように定義されます:

handleClick () { // do something here }

• パラメータを渡す

// handleClick は < アロー関数>/(通常の関数) を定義できます
onClick = { (params) => this.handleClick(params) }

 // handleClick可以是箭头函数，也可以是普通函数<Button onClick = { (params) => this.handleClick(params) }></Button>

なぜこのように書くことが正しいのかを分析しましょう ：

この問題の分析のポイント

この問題を理解するには、次の文を理解してください:

アロー関数は、独自の this を持たないため、定義時のコンテキストの this
になります。通常の関数には独自の this があるため、this は次のようになります。実行時のコンテキストの

まずは見てみましょう 最初の書き方:

1. onClick = { this.handleClick } アロー関数

以下のコードは次のとおりです: ボタンの 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 (
            <p>
            // 1. 为onClick绑定 handleClick事件处理函数
                <Button onClick = { this.handleClick }>click me</Button>
            </p>
        )
    }}export default examplePage;

ボタンをクリックしてこれを出力します:

this: examplePage {props: Object, context: {}, refs: {}, updater: Object , state: {}, …}

分析:

• When Button がクリックされると、handleClick イベント処理関数が呼び出されます。
• handleClick はアロー関数であるため、これが定義されたときのコンテキストの this となり、
• handleClick はクラスで定義されますexamplePage,
• これは examplePage
• を指しているので、アロー関数が通常の関数に変更されるかどうかを確認してみましょう。 状況:

2. onClick = { this.handleClick.bind(this) } 通常の関数

まず、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 (
            <p>
            // 1. 为onClick绑定 handleClick事件处理函数
                <Button onClick = { this.handleClick }>click me</Button>
            </p>
        )
    }}export default examplePage;

ボタンをクリックして、これを出力します:

これ: 未定義

分析:

• ボタンをクリックすると、ハンドルClickイベント処理関数が呼び出されます
• handleClickは通常の関数なので、これが実行コンテキストになります
• handleClickはボタン時に実行されるページ上でクリックされます、コンテキストはHTMLページです
• したがって、これは未定義であり、examplePage を指しません

注: 厳密なバージョンでは、デフォルトではこれはありません。その後、ウィンドウがありますが、未定義です
モジュール コードは常に厳密モード コードです。
ClassDeclaration または ClassExpression のすべての部分は厳密モード コードです。

したがって、このポインターを変更するにはバインドを使用する必要があります。つまり:

render() {
    return (
        <p>
        // 用bind改变this指向
           <Button onClick = { this.handleClick.bind(this) }>click me</Button>
        </p>
    )}

分析:

• ボタンがクリックされると、handleClick イベント処理関数が呼び出されます。
• bind() 関数を通じて、レンダリング関数の this(クラス examplePage を指します) ) を変数として handleClick に渡します
• 本来は handleClick は通常の関数で、これは実行コンテキストの this (つまり未定義) ですが、bind(this) が渡されるため -- を指します。 examplePage.this
• つまり、現時点では、this は examplePage を指しており、これが未定義の問題を解決します

上の 2 つを理解すると、最後の 1 つは理解しやすいです。

3. onClick = { (params) => this.handleClick(params) } 通常の関数/アロー関数が使用可能

render() {
    return (
        <p>
        // 通过箭头函数传参
           <Button onClick = { (params) => this.handleClick(params) }></Button>
        </p>
    )}

分析:

• アロー関数を介してパラメータを渡すことは、アロー関数を onClick にバインドすることと同じです。
• #ボタンがクリックされると、アロー関数 (params) => this.handleClick(params) が呼び出されます。 , したがって、これはコンテキストで定義されています。この、
• handleClick はクラス examplePage,
• で定義されているため、これは examplePage を指します
• この考え方によれば、onClick を書くだけですアロー関数を使用して応答イベントを呼び出し、これがコンポーネント クラスを指している場合、問題はありません。

次に、パラメーターが渡されない場合は、次のように記述します。

<Button onClick = { () => this.handleClick() }></Button>

しかしこれは実現不可能です はい、react は () => this.handleClick() を直接解析するため、handleClick が呼び出されます。これは onClick = "handleClick を呼び出した結果" と同等です

つまり、パラメータが渡されない場合にのみ、このように書くことができます。 :

<Button onClick = { this.handleClick }></Button>

概要
最初の 3 つの質問には答えることができます

• 什么情况下需要bind(this)？
  答： onClick传入的事件处理函数是普通函数的时候，需要bind(this)来改变指向
• 为什么要用bind(this)?
  答：如果不用bind(this), this会指向undefined
• 可以不用bind(this)吗？
  答：用箭头函数 (用箭头函数定义事件处理函数）

//定义handleClick事件
handleClick = () => {
      // do something here
};

//为onClick绑定handleClick事件处理函数
<Button onClick = {this.handleClick}></Button> // 不传参
<Button onClick = {（param) => this.handleClick(param) }></Button> // 传参

推荐学习：《react视频教程》

以上が反応クリック イベントを記述する方法はいくつかありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。