The implementation of event binding this in React points to three methods

1. Arrow Function

1. Take advantage of the fact that the arrow function itself does not bind this;

2. This in the render() method is the component instance, which can get setState();

class App extends React.Component {
    state = {
        count: 0
    }
    // Event handler onIncrement() {
        console.log('this in the event handling function:', this)
        this.setState({
            count:this.state.count+1
        })
    }
    // Rendering render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
              //This in the arrow function points to the external environment, here is: 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 to the component instance

class App extends React.Component {
    constructor() {
        super()
        // data this.state = {
            count: 0
        }
        // The first method.bind changes the this pointer, returns a function, and does not execute the function this.onIncrement = this.onIncrement.bind(this)
    }
     // Event handler onIncrement() {
         console.log('this in the event handling function:', this)
         this.setState({
             count:this.state.count+1
         })
     }
    // Rendering render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

3.Class instance methods

1. Using the class instance method in the form of an arrow function

2. This syntax 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 in the event handling function:', this)
        this.setState({
            count:this.state.count+1
        })
    }
    // Rendering render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.onIncrement}>+1</button>
                {/* <button onClick={this.onIncrement()}>+1</button> */}
            </div>
        )
    }
}

This concludes this article on the implementation of three methods of event binding this in React. For more relevant React event binding this content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: