Shulou(Shulou.com)06/02 Report--

This article mainly talks about "what are the ways to write events in React". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the ways to write events in React"?

1. Direct binding of ordinary anonymous functions

Bind the function directly to onClick, and after clicking on it, the contents of the function will be executed.

2. Use the arrow function instead of anonymous binding

{

Alert ("Click to trigger anonymous function")

Button 2

3. Get the event source in the arrow function (equivalent to the native event object)

{

E.target.style.color.color = "red"

After clicking, the button will turn red.

E is the target in the default event parameter e, indicating that the button will turn red when the target element of the event is clicked.

4. Separate and encapsulate anonymous functions

Click to call the function outside

The show method show method that triggers the external declaration after clicking the button is defined as follows

Constructor (props) {

Super (props)

This.state= {

Num:10

}

}

Show () {

Alert ("Button 4 is clicked but inside this will be out of context")

Alert (this.state.num); / / error this is undefined}

You can pop up the prompt, but there will be problems pointed to by this. Next, let's look at the enhancement of step 5.

5. The code for strengthening and rewriting the this pointing using the arrow function is as follows

Call function

After clicking, num can be changed.

6. let's study the problem of parameters in the arrow function if you take the parameters when you call them.

{

This.show6 ("I am the parameter")

}

} > call a function with parameters

The show6 defined by the method is an arrow function, content is the formal parameter, and the accepted value is that I am the parameter.

Show6= (content) = > {

Alert (content)

}

7. Event function triggers are triggered with parameters and event sources

{

This.show7 ("7777", e)

}

} > take away parameters and event sources

The second parameter e in show7 needs to be specially handled and declared in (e) before it can be taken out, otherwise e will be undefined.

The definition part of the method

Show7= (content,e) = > {

E.target [XSS _ clean] = content

}

Content is the parameter "7777", and e is the event source. You can find the target element through the event source, and then update the contents in it.

8. Do not use the arrow function and use bind enhancement (the first parameter in bind indicates the direction of this in the function declaration before bind)

Bind reinforcement

Where the method is defined

Show8 () {

Alert ("bind binding")

}

9. Rewrite bind close to official recommendation

Bind writing method

In the show9 definition

Constructor (props) {

Super (props)

This.state= {

Num:10

}

This.show9 = this.show9.bind (this); / / the promotion call of bind is written differently from 8}

Show9 () {

Alert (this.state.num)

}

At this point, I believe you have a deeper understanding of "what are the ways to write events in React?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.