Example of Handling Events in ReactJS

React is a JavaScript library for building user interfaces. One of the key features of React is its ability to handle events. In this article, we will discuss how to handle events in ReactJS.

There are two ways to handle events in React: using traditional JavaScript event listeners and using React’s built-in event handling system.

The first method is to use traditional JavaScript event listeners. To do this, you can add an event listener to an element using the addEventListener method. For example, to add a click event listener to a button element, you would use the following code:

<button onClick={this.handleClick}>Click me</button>

The second method is to use React’s built-in event handling system. To do this, you can pass a function as the value of an event-related prop, such as onClick. The function will be invoked when the event occurs.

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button was clicked!');
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

It’s important to note that when using React’s event handling system, the this keyword will be undefined inside the event handler unless you bind the function to the component’s context. This can be done in the constructor or by using the arrow function syntax.

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}

handleClick = () => {
    console.log('Button was clicked!');
}

In addition, React also provides a way to pass event-related data to an event handler. React will automatically pass the event object as the first argument of the event handler.

<button onClick={(e) => this.handleClick(e, someData)}>Click me</button>

In conclusion, handling events in React is easy and straightforward. You can use traditional JavaScript event listeners or React’s built-in event handling system to handle events in your React applications. Remember to take care of binding the function to the component’s context to access the this keyword inside the event handler and also you can pass event-related data to an event handler.

Handing Event in Functional Component

Here’s an example of how to handle events in a React functional component:

import React, { useState } from 'react';

function MyFunctionalComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Button has been clicked {count} times.</p>
    </div>
  );
}

export default MyFunctionalComponent;

In this example, we are using the useState hook to manage the state of a count variable. When the button is clicked, the handleClick function is invoked, which updates the count state using the setCount function. The updated count is then displayed on the page.

We passed the handleClick function as the value of the onClick prop of the button element. It means when the button is clicked, it will invoke the function handleClick.

It’s important to note that in functional components, there is no need to worry about binding the function to the component’s context because the function is defined within the component’s scope, and thus has access to the component’s state and props.

Also, you can pass the event-related data to the event handler just like in class components

<button onClick={(e) => handleClick(e, someData)}>Click me</button>

In this example, we pass the event object as well as someData to the handleClick function, which can then use this data to update the component’s state or perform other logic.

Handing Event in Functional Component

About Yogesh Koli