Shulou(Shulou.com)05/31 Report--

This article mainly explains "what are the ways to write react click events". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the ways to write react click events"?

Write: 1, "onClick= {this.handleClick}"; 2, "onClick= {this.handleClick.bind (this)}"; 3, "{(params) = > this.handleClick (params)}".

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

What are several ways to write react click events?

To get to the point, let's directly give the correct way to add an event to a button:

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

Do not pass parameters

/ / handleClick is defined by

OnClick = {this.handleClick}

/ / when handleClick is defined with the arrow function, add events for onClick should be written as follows:

HandleClick defines it as follows:

HandleClick = () = > {/ / do something here}

Or

/ / handleClick is defined by (ordinary function)

OnClick = {this.handleClick.bind (this)}

/ / when handleClick is defined with ordinary functions, add events for onClick should be written as follows:

HandleClick defines it as follows:

HandleClick () {/ / do something here}

Transmit parameters

/ / handleClick can be defined with / (ordinary function).

OnClick = {(params) = > this.handleClick (params)}

/ / handleClick can be either an arrow function or an ordinary function this.handleClick (params)} >

Let's analyze why it is correct to write this way:

Direction Analysis of this

Understand the problem and understand it with the following sentences:

The arrow function does not have its own this, so its this is: the this of the context when it is defined

An ordinary function has its own this, so its this is: the this of the context at execution time

Let's take a look at the first way to write it:

1. OnClick = {this.handleClick} + Arrow function

The following code is: add an onclick event (a complete jsx) to a button

/ / examplePage.jsximport React from 'react';import {Button} from' antd';class examplePage extends React.Component {/ / 2. Define the handleClick event handleClick = () = > {console.log (this); / / 3. This points to examplePage} render () {return (

/ / 1. Bind the handleClick event handler function click me for onClick

)} export default examplePage

Click the button to print out the this pointing to examplePage:

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

Analysis:

When you click Button, call the handleClick event handler

Because handleClick is an arrow function, this is the this that defines the context

HandleClick defined in class examplePage

So this points to examplePage.

And if you change the arrow function to an ordinary function:

2. OnClick = {this.handleClick.bind (this)} + ordinary function

Let's take a look at what console.log (this) outputs if you don't use bind (this):

/ / examplePage.jsximport React from 'react';import {Button} from' antd';class examplePage extends React.Component {/ / 2.! Change the arrow function to the ordinary function handleClick () {console.log (this); / / 3. This is undefined} render () {return (

/ / 1. Bind the handleClick event handler function click me for onClick

)} export default examplePage

Click the button to print out the this:

This: undefined

Analysis:

When you click Button, call the handleClick event handler

Because handleClick is an ordinary function, this is the this of the execution context

HandleClick executes when you click Button on the page, and the context is the page of html

So this is undefined and does not point to examplePage

Note: in the strict version, the default this is no longer window, but undefined

Module code is always strict mode code.

All parts of a ClassDeclaration or ClassExpression are strict mode code.

Therefore, you need to use bind to change the this direction, that is:

Render () {return (

/ / change this to click me with bind

)}

Analysis:

When you click Button, call the handleClick event handler

Pass the this of the render function (pointing to class examplePage) as a variable to handleClick through the bind () function

Originally, handleClick is an ordinary function, and this is the this (that is, undefined) of the execution context, but because bind (this) is passed in-- a this pointing to examplePage.

So at this point, this points to examplePage, which solves the problem that this is 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 render () {return (

/ / pass the parameter this.handleClick (params)} through the arrow function >

)}

Analysis:

Passing parameters through the arrow function is equivalent to binding an arrow function to onClick.

When you click Button, call the arrow function (params) = > this.handleClick (params), so this is the this of the context when you define it.

HandleClick defined in class examplePage

So this points to examplePage.

In this way of thinking, as long as the response event of the onClick is written with the arrow function, and when called, the this points to the component class, and there will be no problem.

So, when you don't pass parameters, write like this:

This.handleClick ()} >

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

So, when you don't pass parameters, you can only write:

Summary

The first three questions can be answered.

Under what circumstances is bind (this) required?

Answer: when the event handler passed in by onClick is a normal function, you need bind (this) to change the direction.

Why use bind (this)?

A: if you do not use bind (this), this will point to undefined

Can I not use bind (this)?

Answer: use the arrow function (define the event handler with the arrow function)

/ / define handleClick event handleClick = () = > {/ / do something here} / / bind handleClick event handler function for onClick / / do not pass parameters this.handleClick (param)} > / pass parameters Thank you for your reading, the above is the content of "what is the way to write react click events?" after the study of this article, I believe you have a deeper understanding of how to write react click events, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.