1. React event processing
1. The difference from DOM event processing
(1) Naming method of React events: small camel method, DOM naming method is lowercase
For example: DOM naming: onclick
React's name: onClick
(2) Event handling functions are assigned values in an object, not in a string.
For example: DOM in string mode: onclick = "handleClick()"
React in object mode: onClick = { handleClick }
(3) The default events are different
DOM blocks by returning false: <a href="" οnclick="javascript:return false;">Baidu</a>
React needs to be called explicitly to block
2. Definition of event handling function in React
(1) Number of arrows using ES6
① Use arrow functions in the render function:
Ⅰ. Advantages: No need to bind this in the constructor
Ⅱ. Disadvantages: When the logic of the function is relatively complex, the render appears bloated, and it is impossible to intuitively see the UI structure of the component, and the code readability is poor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event handling function-->existrenderUse arrow function</title>
<script src="../js/"></script>
<script src="../js/"></script>
<script src="../js/"></script>
</head>
<body>
<div ></div>
<script type="text/babel">
let root = ('root');
//1. Create a class component class MyComponent extends {
constructor(props){
super(props)
={
msg: 'Student Komori'
}
}
render(){
return (
<div>
<button onClick= { ()=>{ ()} } >Click me</button>
</div>
)
}
}
//2. Render (<MyComponent/>,root)
</script>
</body>
</html>②Use class fields syntax:Assign arrow function to class properties
Ⅰ. Advantages: You don’t need to bind this in the constructor, it is easy to call it in the render function.
<body>
<div ></div>
<script type="text/babel">
let root = ('root');
//1. Create a class component class MyComponent extends {
constructor(props){
super(props)
={
msg: 'Student Xiao Shen',
number: 0
}
}
handleClick = ()=>{ // Assign the arrow function to the attributes of the class () // Assign an arrow function to handleClick, handleClick is a property of MyComponent }
render(){
('render')
return (
<div>
<button onClick= { } >Click me</button> //Calling this property </div>
)
}
}
//2. Render (<MyComponent/>,root)
</script>
</body>(2) Binding in the constructor: use event handling function as a member function of the class
Note: When defining event handler function, this cannot be recognized (that is, this is undefined), and this must be bound in the constructor.
①. Advantages: There is no need to recreate the event handling function when the render function is called.
②. Disadvantages: When there are many events, the constructor will appear cumbersome.
<body>
<div ></div>
<script type="text/babel">
let root = ('root');
//1. Create a class component class MyComponent extends {
constructor(props){
super(props)
={
msg: 'Student Xiao Shen',
number: 0
}
= (this) // This pointer is bound to the function add }
handleClick = ()=>{
()
}
add(){ //If the above does not bind this, then this in the add function will not be recognized let num =
num++
({
number: num
})
()
}
render(){
('render')
return (
<div>
<button onClick= { } >Click me</button>
<button onClick= { }>Number++</button>
</div>
)
}
}
//2. Render (<MyComponent/>,root)
</script>
</body>(3) Bind this in the render function
①. Advantages: When calling event handling functions, it is more convenient to pass parameters.
②. Disadvantages: Rebound every time the render function is called, resulting in performance degradation
<body>
<div ></div>
<script type="text/babel">
let root = ('root');
//1. Create a class component class MyComponent extends {
constructor(props){
super(props)
={
msg: 'Student Xiao Shen',
number: 0
}
// = (this) // This pointer is bound to the function add }
handleClick = ()=>{
()
}
add(){ //If the above does not bind this, then this in the add function will not be recognized let num =
num++
({
number: num
})
()
}
render(){
('render')
return (
<div>
<button onClick= { } >Click me</button>
<button onClick= { (this) }>Number++</button>
</div>
)
}
}
//2. Render (<MyComponent/>,root)
</script>
</body>(4) Event handling function in React
Comparison of several ways
Influence in constructor function bind using class fields syntax rendering in render function when using arrow function rendering. Generate new function. No, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no,
(5) Things to note
① The naming of React events is made by camelCase rather than pure lowercase. And () cannot be added after the event name, otherwise it will be executed directly.
② The default behavior cannot be blocked by returning false. If it must be displayed, use preventDefault.
③ This in JXS callback function must be treated with caution. In JavaScript, the class (class) method will not bind this by default. If you forget to bind and pass it into onChange, when this function is called, the value of this is undefined. If you feel it's troublesome to use bind, you can also use the arrow function.
3. Parameters passed in event processing
(1) Directly pass parameters
①Bind this to the event processing function in the constructor, and pass the parameters directly when calling the event processing function.
<div ></div>
<script type="text/babel">
let root = ('root');
//1. Define class components class Clock extends {
constructor(props){
super(props)
= {
list:[
{
id: 111,
msg: 'Komori'
},
{
id: 222,
msg: 'Xiao Shen'
},
{
id: 333,
msg: 'Xiao Gu'
}
],
msg: 'serial number:'
}
= (this)
}
handleClick(id){ //Event Handling Function alert("serial number:"+id)
}
render(){
//Get the status attribute value const { list } =
return (
<div>
{
((item)=>
<button onClick={ ()=>{()}} key={}>{}</button>
)
}
</div>
)
}
}
//2. Rendering (<Clock/>,root)
</script>Note: This is not required to bind to this when calling event handler function in arrow function
② This binding is performed when calling event handling function in render function
<div ></div>
<script type="text/babel">
let root = ('root');
//1. Define class components class Clock extends {
constructor(props){
super(props)
= {
list:[
{
id: 111,
msg: 'Komori'
},
{
id: 222,
msg: 'Xiao Shen'
},
{
id: 333,
msg: 'Xiao Gu'
}
],
msg: 'serial number:'
}
}
handleClick(id){ //Event processing function, e represents the object that triggers the event, member function let str =
alert(str + id)
}
render(){
//Get the status attribute value const { list } =
return (
<div>
{
((item)=>
<button onClick={ (this,) } key={}>{ }</button>
)
}
</div>
)
}
}
//2. Rendering (<Clock/>,root)
</script>(2) Use data custom attributes when defining UI controls, and use '.property name' to get the data attribute value in the UI control in the event handler function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parameter passing in event processing</title>
<script src="../js/"></script>
<script src="../js/"></script>
<script src="../js/"></script>
</head>
<body>
<div ></div>
<script type="text/babel">
let root = ('root');
//1. Define class components class Clock extends {
constructor(props){
super(props)
= {
list:[
{
id: 111,
msg: 'Komori'
},
{
id: 222,
msg: 'Xiao Shen'
},
{
id: 333,
msg: 'Xiao Gu'
}
],
msg: 'serial number:'
}
}
handleClick(e){ //Event handling function, e represents the object that triggers the event let str =
alert(str + )
//Event processing object event, through event you can get the target object, which is that button. Dataset, get a collection of custom attributes, find the count in the collection }
render(){
//Get the status attribute value const { list } =
return (
<div>
{
((item)=>
<button
onClick={ (this) }
key={}
data-count = { } //The custom attribute of the tag starts with 'data-' followed by the custom attribute name >{ }</button>
)
}
</div>
)
}
}
//2. Rendering (<Clock/>,root)
</script>
</body>
</html>4. Event flow
(1) The event stream of React is bubbled by default
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event flow</title>
<script src="../js/"></script>
<script src="../js/"></script>
<script src="../js/"></script>
</head>
<body>
<div ></div>
<script type="text/babel">
let root = ('root')
//1. Define CSS style const style = {
child: {
width: '100px',
height: '100px',
backgroundColor: 'red'
},
parent: {
width: '150px',
height: '150px',
backgroundColor: 'blue'
},
ancestor: {
width: '200px',
height: '200px',
backgroundColor: 'green'
}
}
//2. Define class components class App extends {
render(){
return (
<div
onClick= { ()=>{ ('ancestor')}}
style = { }
>
<div
onClick={ ()=>{ ('parent')}}
style = { }
>
<div
onClick={ (e)=>{
('child')
() //Stop bubbles }}
style = { }
>
</div>
</div>
</div>
)
}
}
//3. Rendering (<App/>,root)
</script>
</body>
</html>
//Outputchild，parent，ancestor(2) Capture method is used in React: add a suffix Capture after the event type
First, the document finds the outermost green layer, then passes it to the blue, and then passes it to the red. So the order of output in the tool is (ancestor, parent, child)
5. Event Object
Although React events are synthetic events, the event object can be obtained in event processing
(1) There is a global event object in React event processing
The event object will be cleared after each event is triggered (after the event processing function call is completed), and the event object will be cleared and re-get the object when the next event is triggered. This object is not a native (DOM) event object, but some properties of the native object can be obtained through this object
<div ></div>
<script type="text/babel">
let root = ('root')
//1. Define style rules const style = {
"mydiv": {
width: '150px',
height: '150px',
backgroundColor: 'red'
}
}
//2. Define class components class App extends {
constructor(props){
super(props)
= {
x: 0,
y: 0
}
}
render(){
return (
<div>
<div style = { style['mydiv']} //Set styles in array onClick= { (event)=> { //The 'event' object is not a native event, but some properties of the native event object can be obtained through event const { clientX,clientY } = event
({
x: ,
y:
})
>
X: {},Y: { }
</div>
</div>
)
}
}
//3. Rendering (<App />,root)
</script>(2) Get event in asynchronous operation
Problem: When the event is triggered and the response is completed, the event object will be cleared, but the asynchronous data has not been obtained yet. After obtaining the asynchronous data, an error will be reported.
Solution: Save some attribute values of the event object first, and then use these attribute values after obtaining asynchronous data.
<div ></div>
<script type="text/babel">
let root = ('root')
//1. Define style rules const style = {
"mydiv": {
width: '150px',
height: '150px',
backgroundColor: 'red'
}
}
//2. Define class components class App extends {
constructor(props){
super(props)
= {
x: 0,
y: 0
}
}
render(){
return (
<div>
<div style = { style['mydiv']} //Set styles in array onClick= { (event)=> { //The 'event' object is not a native event, but some properties of the native event object can be obtained through event const { clientX,clientY } = event //Define the variable and save the event setTimeout(()=>{ //The next time the trigger is triggered, you can get the value stored in the variable ({
x: clientX,
y: clientY
})
},1000)
}}
>
X: {},Y: { }
</div>
</div>
)
}
}
//3. Rendering (<App />,root)
</script>Summarize
That’s all for this article. I hope it can help you, and I hope you can pay more attention to more of my content!