What are the several ways to write react click events?

Writing method: 1. Use "onClick={this.handleClick}"; 2. Use "onClick={this.handleClick.bind(this)}"; 3. Use "{(params)=> this.handleClick(params)}".

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What are the several ways to write react click events?

Let’s get straight to the point. Let’s first directly give the correct way to write an event for a button:

Add for a button The correct way to write an onclick event

• No parameters are passed

// handleClick is defined with
onClick = { this.handleClick }

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

handleClick is defined like this:

handleClick = () => { // do something here};

or

// handleClick is used (ordinary function) definition
onClick = { this.handleClick .bind(this) }

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

handleClick is defined as follows:

handleClick () { // do something here }

• Pass parameters

// handleClick uses < Arrow function>/(ordinary function) can be defined
onClick = { (params) => this.handleClick(params) }

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

Let’s analyze why writing like this is correct ：

Pointing analysis of this

To understand this problem, take the following sentences to understand:

Arrow function, It does not have its own this, so its this is: this
of the context when it is defined. An ordinary function has its own this, so its this is: this

of the context when it is executed. Let’s look at it first. The first way to write:

1. onClick = { this.handleClick } Arrow function

The code given below is: add an onclick event for a button (a complete 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;

Click the button and print out this:

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

Analysis:

• When the Button is clicked, the handleClick event processing function is called,
• Because handleClick is an arrow function , so this is the this of the context when it is defined,
• handleClick is defined in class examplePage,
• so this points to examplePage
• Let’s see if the arrow function is changed to a normal function Situation:

2. onClick = { this.handleClick.bind(this) } Ordinary function

Let’s look at it first, if bind(this) is not used , what console.log(this) will output:

// 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 the button and print out this:

this: undefined

Analysis:

• When the Button is clicked, the handleClick event processing function is called.
• Because handleClick is an ordinary function, this is the this of the execution context.
• handleClick is clicked on the page Executed when Button, the context is the html page
• So this is undefined and does not point to examplePage

Note: In the strict version, the default this is not Then there is window, but undefined
Module code is always strict mode code.
All parts of a ClassDeclaration or ClassExpression are strict mode code.

So you need to use bind to change this pointer , that is:

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

Analysis:

• When the Button is clicked, the handleClick event processing function is called,
• Through the bind() function, the render function's this(points to class examplePage), as a variable passed into handleClick
• Originally handleClick is an ordinary function, this is the this of the execution context (that is, undefined), but because bind(this) is passed in - - it points to examplePage. this
• So at this time, this points to examplePage, which solves the problem of this being undefined

After understanding the above two, the last one is easy to understand:

3. onClick = { (params) => this.handleClick(params) } Ordinary functions/arrow functions can be used

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

Analysis:

• Passing parameters through the arrow function is equivalent to binding an arrow function to onClick.
• When the Button is clicked, the arrow function (params) => this.handleClick(params) is called, so this is defined in the context. this,
• handleClick is defined in class examplePage,
• so this points to examplePage
• According to this idea, just write the onClick response event with an arrow function and call When, this points to the component class, there will be no problem

Then, when no parameters are passed, just write like this:

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

But this is not feasible Yes, because react will directly parse () => this.handleClick(), handleClick will be called, which is equivalent to onClick = "result of calling handleClick"

So, you can only write like this when no parameters are passed. :

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

Summary
The three questions at the beginning can be answered

• 什么情况下需要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视频教程》

The above is the detailed content of What are the several ways to write react click events?. For more information, please follow other related articles on the PHP Chinese website!