React.js – Event Handling

In this lesson, we would cover Event Handling in both functional and class components. We also examine the concept of Event Binding.

1. Event Handling in React
2. Event Binding in Class Component
3. Four Ways to Bind ‘this’ Keyword

1. Event Handling in React

React provides a way to handle events that occur in the lifetime of components. This events include: button click, text changed, mouseover, etc. Event handing in React is similar to JavaScript but with these few differences:

• events in React are name using camelCase and not lowercase
• you pass the function as the event handler, not the function call. So you don’t use the parenthesis “()”

For example, in HTML we use:

<button onclick=“clickMe()”>
Button Here
</button>

but in React, we use this instead:

<button onClick={clickMe}>
  Button Here
</button>

So note the absense of parentheses and quotation marks

2. Event Binding in Class Component

Event binding is need in React because of the way ‘this’ keyword works in JavaScript. The summary is: “the value the ‘this’ keyword is undefined inside a function body”. So keep this in mind. Let’s illustrated this. I create a class component that contains a button and a message, “Welcome”. On click of this button, the message changes to “Goodbye”

import React, { Component } from 'react'

class BindEvent extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             message: 'Welcome'
        }
    }
    
    clickMe(){
        this.setState({
            message: 'Good bye!'
        })
        console.log(this) //this is undefined here
    }

    render() {
        return (
            <div>
                <div>{this.state.message}<<span">/div>
                <button onClick={this.clickMe}>Click here</button>
            </div>
        )
    }
}

export default BindEvent

When this code executes and you click on the button, you get error. If you log the this keyword inside the clickMe() function you’ll see that it is undefined. So how do we solve this? By binding the ‘this’ keyword.

3. Binding the ‘this’ Keyword

Let’s not see a number of ways we can bind the ‘this’ keyword.

(a) Using the bind keyword to bind the handler in the render method. The changes are shown below:

<button onClick={this.clickMe.bind(this)}>Click here</button>

(b) Using arrow function in the render method.

<button onClick={() => this.clickMe()}>Click here</button>

The challenge with these two approaches is that is that every update to the state will cause the component to re-render. This in turn will generate a new event handler on every render. Therefore, performance would degrade in large applications.

(c) Binding the event handler in the constructor instead of in the render method. This is the approach recommended in the React documentation. To use this, add the code below inside the component’s constructor:

this.clickMe = this.clickMe.bind(this)

then in the render method:

<button onClick={this.clickMe}>Click here</button>

(d) Using an arrow function as a class property. This requires defining the clickMe() as an arrow function.

    //method defined as arrow function
    clickMe = () => {
        this.setState({
           message: 'Good Bye'
        })
    }

So these are the four approaches for binding the this keyword. Also keep in ming the the third and fourth methods are recommended.