Event handling basics in ReactJS

by

Handling events is an important part of building ReactJS applications. Whether you’re building a simple form or a complex user interface, you need to be able to respond to user actions and update your application state accordingly.

In ReactJS, event handling is similar to traditional HTML event handling but with some differences.

For example, in traditional HTML, an event handler for a button click would be defined like this:

<button onclick="myFunction()">Click me</button>

In ReactJS, we would define the event handler like this:

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

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

Handling events with class components:

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

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

Handling events with functional components:

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

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

Passing arguments to event handlers

import React from 'react';

function Button(props) {
  const handleClick = (value) => {
    alert(value);
  };

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

export default Button;

Understanding SyntheticEvent in ReactJS

In ReactJS, events are wrapped in a SyntheticEvent object, which is a cross-browser wrapper around the native browser event. The SyntheticEvent object contains the same properties and methods as the native event, but it has some additional features, such as automatic event pooling to reduce memory usage. Here’s an example:

class Input extends React.Component {
  handleChange(event) {
    console.log('Input value:', event.target.value);
  }

  render() {
    return <input type="text" onChange={this.handleChange} />;
  }
}

Note that we access the value of the input field using event.target.value, just like in traditional HTML event handling.

Leave a Comment