What are the ways to write events in React
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!
