DEV Community

Haque.
Haque.

Posted on

Day 6: Handling Events in React

Welcome to Day 6 of our "30 Days of ReactJS" series! Today, we’re diving into Handling Events in React. Understanding event handling is crucial for creating interactive and user-friendly applications.

What is Event Handling?

Event handling in React allows you to respond to user actions such as clicks, form submissions, or keyboard inputs. In React, events are handled in a way that is similar to how you would handle them in plain HTML/JavaScript, but with some key differences that fit within React’s declarative model.

React Event Handling Basics

In React, event handlers are passed as props to React elements. Unlike plain HTML, React event handlers use camelCase syntax instead of lowercase. For example, onClick instead of onclick.

Example: Basic Button Click Handler

import React from 'react';

function ClickButton() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

export default ClickButton;
Enter fullscreen mode Exit fullscreen mode

In this example, the handleClick function is executed when the button is clicked, displaying an alert.

Real-Life Example: ATM Machine
Imagine an ATM machine where you enter your PIN and select an amount to withdraw. Each button press (like entering a digit or selecting the withdrawal amount) triggers an event. In React, you handle these interactions using event handlers.

Event Objects

React event handlers receive an event object as an argument. This object contains information about the event, such as the target element and the type of event.

Example: Handling Input Change

import React, { useState } from 'react';

function InputForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>You typed: {value}</p>
    </div>
  );
}

export default InputForm;
Enter fullscreen mode Exit fullscreen mode

Here, the handleChange function updates the state with the input value, allowing you to see what is typed in real-time.

Binding Event Handlers

In class components, you often need to bind event handlers to the component instance. This is not necessary in functional components with hooks, as functions are automatically bound.

Example: Binding in Class Components

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Binding ensures that this refers to the component instance inside the event handler.

Event Handling with Vite

With Vite as your development tool, handling events remains straightforward. Vite’s fast refresh helps you see changes immediately, making it easier to test and debug your event handlers.

Wrapping Up

Handling events is a fundamental aspect of React that allows your application to respond to user interactions. By attaching event handlers to elements, you can make your app dynamic and interactive.

Tomorrow, we’ll build upon this by exploring Building Your First ReactJS App, where you’ll see how event handling integrates into a complete application.

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay