Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS | Binding Event Handlers

  • Last Updated : 22 Jun, 2020

In ReactJS, we need to bind events so that the this keyword would not return an “undefined“. In this article, we are going to see the different ways in which we can bind event handlers in ReactJS.

First, let’s make a new class component and name it Binding.js. Make a simple class component with a simple message state and render a simple button as shown below. Don’t to forget to import this component in App.js file.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Binding.js:



Javascript




import React, { Component } from 'react';
  
class EventBind extends Component {
    constructor(props) {
        super(props)
      
        this.state = {
            message: 'Welcome'
        }
    }
      
    render() {
        return (
            <div>
                <h3>{this.state.message}</h3>
                <button>Click</button> 
            </div>
        )
    }
}
  
export default EventBind;

Let’s write an event that changes the state of message from Welcome to ‘Farewell whenever the button is clicked. So let’s define an onClick method to the button and write an event handler clickHandler().

Javascript




import React, { Component } from 'react';
  
class EventBind extends Component {
    constructor(props) {
        super(props)
      
        this.state = {
            message: 'Welcome'
        }
    }
      
    clickHandler() {
        this.setState({
            message:'Farewell'
        })
    }
  
    render() {
        return (
            <div>
                <h3>{this.state.message}</h3>
                <button onClick={this.clickHandler}>Click</button> 
            </div>
        )
    }
}
  
export default EventBind;

Output: Now if we run the application and click on the button, we get an error. This is because this returns an “undefined”. This is why we need to bind our events.

Error

  • Binding Event Handler in Render Method: We can bind the handler when it is called in the render method using bind() method. 

Javascript




import React, { Component } from 'react';
  
class EventBind extends Component {
    constructor(props) {
        super(props)
      
        this.state = {
            message: 'Welcome'
        }
    }
      
    clickHandler() {
        this.setState({
            message:'Farewell'
        })
    }
  
    render() {
        return (
            <div>
                <h3>{this.state.message}</h3>
                <button onClick={this.clickHandler.bind(this)}>
                         Click</button> 
            </div>
        )
    }
}
  
export default EventBind;
  • Binding Event Handler using Arrow Function: This is pretty much the same approach as above, however, in this approach we are binding the event handler implicitly. This approach is the best if you want to pass parameters to your event.

Javascript




import React, { Component } from 'react';
  
class EventBind extends Component {
    constructor(props) {
        super(props)
      
        this.state = {
            message: 'Welcome'
        }
    }
      
    clickHandler() {
        this.setState({
            message:'Farewell'
        })
    }
  
    render() {
        return (
            <div>
                <h3>{this.state.message}</h3>
                <button onClick={() => this.clickHandler()}>
                  Click
                </button> 
            </div>
        )
    }
}
  
export default EventBind;
  • Binding Event Handler in the Constructor: In this approach, we are going to bind the event handler inside the constructor. This is also the approach that is mentioned in ReactJS documentation. This has performance benefits as the events aren’t binding every time the method is called, as opposed to the previous two approaches. Just add the following line in the constructor for this approach,

Javascript




this.clickHandler = this.clickHandler.bind(this)
  • Binding Event Handler using Arrow Function as a Class Property: This is probably the best way to bind the events and still pass in parameters to the event handlers easily.

Javascript




import React, { Component } from 'react';
  
class EventBind extends Component {
    constructor(props) {
        super(props)
      
        this.state = {
            message: 'Welcome'
        }
    }
  
    clickHandler = () => {
        this.setState({
            message:'Farewell'
        })
    }
  
    render() {
        return (
            <div>
                <h3>{this.state.message}</h3>
                <button onClick={this.clickHandler}>
                  Click
                </button> 
            </div>
        )
    }
}
  
export default EventBind;

Output: All of these approaches offer the same solution to the problem, you can use any of them according to your requirements.

State after button is clicked




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!