反応クリックイベントを記述する方法はいくつかありますか?-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2022-04-22 10:28:08

オリジナル

2652 人が閲覧しました

記述方法: 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 サイトの他の関連記事を参照してください。