Event handling in class component in Reactjs


As in functional component event handling class too support multiple approach for event handling. In our example we have four buttons( class components ) which respond to the button click.

Our App.js have the following code

import Button1 from "./components/Button1";
import Button2 from "./components/Button2";
import Button3 from "./components/Button3";
import Button4 from "./components/Button4";
import "./App.css"
function App() {
  return <div className="App">
      <Button1/>
      <Button2/>
      <Button3/> 
      <Button4/> 
  </div>
}

export default App;

In class component in , we can add event handler using any of the following method.

  • Binding event handler in render method

  • Bind event handler in class contractor

  • Event handler as class property

  • An arrow function in the render method

Binding event handler

The first two method, we have to bind the event handler using the this operator. For this create a function for handle particular event then we can bind the function in the constructor/render and pass it to the corresponding event as follows.

import React, { Component } from 'react'


class Button3 extends Component {
  constructor(props) {
    super(props)
    
    this.handleClick=this.handleClick.bind(this)
    
  }

  handleClick  () {
alert('Button3 Clicked')
  }
  render() {
    return (
      <div>
          <button onClick={this.handleClick}>Button3 - Binding in constructor</button>
      </div>
    )
  }
}

export default Button3

In the second approach we can move the binding to the render. Function call at render time may cause performance cut, in bigger applications.

import React, { Component } from 'react'
class Button3 extends Component {
  
  handleClick  () {
alert('Button3 Clicked')
  }
  render() {
    return (
      <div>
          {/* binding @ render*/}
          <button onClick={this.handleClick.bind(this)}>Button3 - Binding in render</button>
      </div>
    )
  }
}

export default Button3

Arrow function as event handler

We can use an arrow function as property of the class to handle the event as follows

import React, { Component } from "react";

class Button2 extends Component {
  handleClick = () => {
    alert("Button2 Clicked");
  };
  render() {
    return (
      <div>
        {/* Arrow function- as class property */}
        <button onClick={this.handleClick}>Button2 - Arrow Fun - class property</button>
      </div>
    );
  }
}

export default Button2;

Arrow function at render method

We can also use the arrow function in the render method as follows

import React, { Component } from 'react'
class Button1 extends Component {
  render() {
    return (
      <div>
          {/* Arrow function in render */}
          <button onClick={()=> alert('Button1 clicked')}>Button1 - Arrow Fun in render</button>
      </div>
    )
  }
}

export default Button1

Which method is right ?

While all the methods are ok in normal case, while dealing with big data render methods may cause performance cut. React official document suggest either class property ( using arrow function) or binding at constructor.

The complete set of example in this tutorial can be found @ GitHub Example repository

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.