ReactJS Events

Syntax

In ReactJS, event handling is done using the on prefix followed by the name of the event to be handled. For example, to handle the click event on a button, use the following syntax:

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

Here, handleClick is the name of the function that will be called when the button is clicked.

Example

In this example, we will create a simple button that when clicked, will display an alert message.

import React from 'react';

function App() {
  function handleClick() {
    alert('Hello, World!');
  }

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

export default App;

Output

When the button is clicked, an alert message will be displayed with the text "Hello, World!".

Explanation

In the above example, we have created a handleClick function that will be called when the button is clicked. This function simply displays an alert message using the alert function provided by the browser.

We have then attached this function to the onClick event of the button using the onClick attribute. When the button is clicked, the handleClick function is called, which displays the alert message.

Use

Event handling is an essential part of building interactive user interfaces in ReactJS. With event handling, you can create buttons, links, forms, and other interactive elements that respond to user input.

Important Points

• Events in ReactJS use the on prefix followed by the name of the event to be handled.
• The event handler function is attached to the element using the attribute={functionName} syntax.
• Event handlers can be defined inline or as separate functions.
• When defining event handlers, it is important to use event.preventDefault() to prevent the default behavior of the browser.

Summary

In this tutorial, we have learned how to handle events in ReactJS. We have seen examples of creating event handlers and attaching them to elements. We have also discussed the importance of using event.preventDefault() to prevent the default behavior of the browser.