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

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 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)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course