Event handling

1. stay React The attribute of event binding in needs to be written in the way of hump naming , Such as onClick
2. React The event in is not DOM Native event , But through React Events handled

Event binding

stay react There are three ways to bind events in , The first method is recommended for binding

Example

import React, {
     Component, createRef } from "react";

export default class UseRefs extends Component {
    
  constructor(props){
    
    super(props)
    this.handleClick3 = this.handleClick3.bind(this)
  }
  //  The first way 
  handleClick1 = () => {
    
      console.log("hello world");
  };
  //  The third way 
  handleClick3(){
    
    console.log("hello react hooks");
  }

  render() {
    
    return (
      <>
        <button onClick={
    this.handleClick1}> Click on 1</button>
        {
    /*  The second way  */}
        <button onClick={
    () => console.log("hello react")}> Click on 2</button>
        <button onClick={
    this.handleClick3}> Click on 3</button>
      </>
    );
  }
}

The way

stay DOM Direct binding in

• Write it in the way of the above example
• It should be noted that , Be sure to follow an arrow function , hold this Point to the outside , If you don't use the arrow function , that this Namely undefined

Save the method to the property of the class

Like the example above 1 And way 3

The same thing

• The way 1 And way 3 The same thing is that the method of binding events is the same

Difference

• Mainly in functions this The direction of , Because of the way 3 Own your own this, So we should bind in the constructor this, Let him point to the component instance

Parameter passing

Official website

Code

import React, {
     Component } from "react";

export default class UseRefs extends Component {
    

  state = {
    
    arr:[2,3,4,6]
  }
  handleClick = (_index,event) => {
    
    console.log("index",_index);
    console.log("event",event);
    console.log("event.target",event.target);
  };
  render() {
    
    return (
      <ul>
          {
    this.state.arr.map((_item,_index) => <li key={
    _index} onClick={
    (event) => this.handleClick(_index,event)}>{
    _item}</li>)}
      </ul>
    );
  }
}

The interpretation of the code

Event object

• To get the event object, we must give a callback function when time binding , The first parameter of the callback function is the event object , Call our defined function in the callback function to pass in the corresponding parameters
• adopt event.target Can get the element that triggers the event

Event Bubbling

What is event bubbling Click on

import React, {
     Component } from "react";

export default class UseRefs extends Component {
    
  handleClick = () => {
    
    console.log("ul Events above ");
    console.log(this);
  };
  handleClick1 = () => {
    
    console.log(" Click on 1 Events ");
    console.log(this);
  };
  handleClick2 = (event) => {
    
    console.log(" Click on 2 Events ");
    console.log(this);
    event.stopPropagation();
  };

  render() {
    
    return (
      <ul onClick={
    this.handleClick}>
        <li onClick={
    this.handleClick1}> Click on 1</li>
        <li onClick={
    event => this.handleClick2(event)}> Click on 2</li>
        <li> Click on 3</li>
      </ul>
    );
  }
}

Bubbling

When we click Click on 1 When , We'll find that he triggered two events ( Own events and parent Events )
When we click Click on 3 When ,
You'll find that he also triggered the event , But this incident is really his father's incident

Bubbling mechanism

1. Child element has no event binding , Click on the child element , If there is a bound click event on its parent element , Then the click time of the parent element will be triggered
2. Child elements have binding events , If the parent element has the same type of binding event , Then the binding event on the parent element will also be triggered

Stop the event from bubbling

stay React in , Use event.stopPropagation() To stop the bubbling of events , If you click 2