Event Handling

Event handling in React is a crucial concept that allows you to interact with user inputs and other events in your application. React follows a slightly different approach to event handling compared to plain HTML and JavaScript. Here’s an overview of how event handling works in React:

Event Binding

In React, events are not bound using HTML attributes like in plain HTML (<button onclick="handleClick()">). Instead, events are handled using JSX syntax and camelCase naming conventions.

For example, instead of onclick, you use onClick. Here’s how you might handle a button click event:

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

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

handleClick is an event handler. It’s a common practice to name event handlers using the prefix “handle” followed by the event name. For example, you might see onClick={handleClick}, onMouseEnter={handleMouseEnter}, and similar patterns.

Other formats

Alternatively, you can define an event handler inline in the JSX:

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

Or, using an arrow function:

<button onClick={() => {
  alert('You clicked me!');
}}>

These styles are essentially identical. Inline event handlers are useful for short functions due to their convenience.

Common Event Types

React supports a variety of event types, such as:

  • Mouse events: onClick, onDoubleClick, onMouseEnter, onMouseLeave, etc.
  • Form events: onChange, onSubmit, onInput, etc.
  • Keyboard events: onKeyDown, onKeyPress, onKeyUp, etc.
  • Focus events: onFocus, onBlur, etc.

Passing Arguments to Event Handlers

Sometimes, you need to pass arguments to your event handler. This can be done using an arrow function.

function MyButton() {
  function handleClick(param) {
    console.log(param);
  }

  return (
    <button onClick={() => handleClick('Button clicked!')}>
      Click me
    </button>
  );
}

Preventing Default Behavior

In React, to prevent the default behavior of an event, you use event.preventDefault() inside the event handler. For example, to prevent a form from submitting:

function MyForm() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log('Form submission prevented');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

Common mistakes

// This alert fires when the component renders, not when clicked!
<button onClick={alert('You clicked me!')}>
//The correct format is:
<button onClick={() => alert('You clicked me!')}>

// the () at the end of handleClick() fires the function immediately during rendering, without any clicks. 
<button onClick={handleClick()}>
//The correct format is:
<button onClick={handleClick}>

React Event Object

In React, event handlers automatically receive an event object that contains detailed information about the event, such as its type, value, target, ID, and more. This event object is implicitly passed by React, so you don’t need to explicitly include it as an argument in the event handler. However, if you want to pass any additional arguments to the handler, those must be explicitly defined.

function handleClick(event) {
    console.log(event.target); // Accesses the element that triggered the event
    console.log(event.type);   // Logs the type of event, e.g., "click"
}

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

Passing event object and other argument

You can pass both the event object and an additional argument to an event handler in React. in this case you should pass both parameter explicitly. Here’s an example that demonstrates how to do this:

import React from "react";

function handleClick(event, message) {
    event.preventDefault(); // Prevents the default action
    console.log("Event type:", event.type); // Logs the event type, e.g., "click"
    console.log("Extra argument:", message); // Logs the additional argument
}

function MyButton() {
    return (
        <button onClick={(event) => handleClick(event, "Button clicked!")}>
            Click Me
        </button>
    );
}

export default MyButton;

Handling mouse events

In this example, the handleMouseEnter function handles the onMouseEnter event, providing access to the event object when the mouse enters the specified element.

function handleMouseEnter(event) {
    console.log("Mouse entered:", event.target);
}

function MyComponent() {
    return <div onMouseEnter={handleMouseEnter}>Hover over me!</div>;
}

You can access even the coordinate of mouse pointer and other kind of information using the event object.

Read more:

https://react.dev/learn/responding-to-events

https://www.w3schools.com/react/react_events.asp

Scroll to Top