Implementation of three methods of event binding this pointing in react

Time:2021-12-7

1. Arrow function

1. Use the feature that the arrow function itself does not bind this;

2. This in the render () method is a component instance, and you can get setstate();

class App extends React.Component{
    state ={
        count: 0
    }
    //Event handler
    onIncrement() {
        Console.log ('This: ', this in the event handler function)
        this.setState({
            count:this.state.count+1
        })
    }
    //Render
    render() {
        return (
            <div>
                <h1> {this.state.count}</h1>
              //This in the arrow function points to the external environment. Here is the render () method
                <button onClick={()=>this.onIncrement()}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

2.Function.proptype.bind()

1. Use the bind method in Es5 to bind this in the event handler with the component instance

class App extends React.Component{
    constructor() {
        super()
        //Data
        this.state ={
            count: 0
        }
        //In the first method, the. Bind method changes the point of this and returns a function without executing the function
        this.onIncrement = this.onIncrement.bind(this)
    }
     //Event handler
     onIncrement() {
         Console.log ('This: ', this in the event handler function)
         this.setState({
             count:this.state.count+1
         })
     }
    //Render
    render() {
        return (
            <div>
                <h1> {this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

3. Instance method of class

1. Class instance method in the form of arrow function

2. This grammar is experimental, but it can be used directly due to the existence of Babel

class App extends React.Component{
    constructor() {
        super()
        //Data
        this.state ={
            count: 0
        }
    }
      //Event handler 
      onIncrement=()=> {
        Console.log ('This: ', this in the event handler function)
        this.setState({
            count:this.state.count+1
        })
    }
    //Render
    render() {
        return (
            <div>
                <h1> {this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

This is the end of this article about the implementation of the three methods of event binding this pointing in react. For more relevant content of event binding this pointing in react, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Heavyweight Tencent cloud open source industry’s first etcd one-stop governance platform kstone

​ Kstone open source At the kubecon China Conference held by CNCF cloud native foundation on December 9, 2021,Tencent cloud container tke team released the open source project of kstone etcd governance platform. KstoneIt was initiated by the TKE team of Tencent cloud containerCloud native one-stop etcd governance project based on kubernetes。 The project originates […]