by Sai gowtham

How to handle the Events in React app

In this tutorial, we are going to learn about handling events in react and also why we bind this keyword in react).

In Jsx we need to wrap the JavaScript expressions with the curly braces { }.

Normal JavaScript

<button onclick="hitMe()">hit me</button>

In react.

<button onClick={hitMe}>hitme</button>

Let’s learn more about, how to attach event handlers in functional and class based components.

Functional components

function Button(){


  function handleClick(){    alert('some one clicked me')  }
    return (
      <button onClick={handleClick} >Click me</button>    )

}

In react, we need to pass the event handler function as a reference.

Passing Arguments

we can also pass arguments to the event handler functions like this.

function Button(){

  function handleClick(name){
     alert(name)
  }

    return (
      <button onClick={()=>handleClick('react')} >Click me</button>    )

}

Class based components

class Counter extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      num : 0
    }
  }

  handleInc(){    this.setState({      num : this.state.num+1    })  }
  render(){
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={this.handleInc.bind(this)}>Increment</button>      </div>
    )
  }
}

In class-based components we need to bind this keyword to the class otherwise this keyword will bound to the global window object or in strict mode this will be undefined.

We can solve this problem by using arrow functions because in arrow functions this keyword will bound to its outer execution context.

Learn more about how classes work in JavaScript

Let’s modify the above component by using arrow functions.

class Counter extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      num : 0
    }
  }

  handleInc(){    this.setState({      num : this.state.num+1    })  }
  render(){
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={()=>this.handleInc()}>Increment</button>      </div>
    )
  }
}

Second way using public class fields syntax

class Counter extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      num : 0
    }
  }

  handleInc = () => {    this.setState({      num : this.state.num+1    })  }
  render(){
    return (
       <div>
        <h1>Counter</h1>
        <h3>{this.state.num}</h3>
        <button onClick={this.handleInc}>Increment</button>      </div>
    )
  }
}

Event object

We can also use the event object like this in react.

function Link(){

  function handleClick(e){
     console.log(e);
     e.preventDefault();  }

  return (
      <a href="#" onClick={handleClick} >Click me</a>  )

}

React supported events

  • Clipboard Events
  • Composition Events
  • Keyboard Events
  • Focus Events
  • Form Events
  • Mouse Events
  • Pointer Events
  • Selection Events
  • Touch Events
  • UI Events
  • Wheel Events
  • Media Events
  • Image Events
  • Animation Events
  • Transition Events
  • Other Events

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course