React Events

Summary: in this tutorial, you will learn about React events and how to add event handlers to JSX elements.

In React apps, user interaction triggers events such as mouse clicks and form submits.

React allows you to add event handlers to JSX elements directly. Event handlers are functions that you want to execute in response to events.

Adding event handlers

To add an event handler to a JSX element, you follow these steps:

• First, define a function, or event handler, that will execute when an event occurs.
• Second, pass the function as a prop of the JSX element.

For example, suppose you have a button:

const App = () => {
  return <button>Click me</button>;
};

export default App;Code language: JavaScript (javascript)

When you click the button, it does not do anything yet.

To show an alert when the button is clicked, you can do the following:

First, declare an event handler such as the handleClick function:

const handleClick = () => {
    alert('Clicked');
};Code language: JavaScript (javascript)

The handleClick function shows an alert.

Second, assign the function to the onClick prop of the <button> JSX element:

return <button onClick={handleClick}>Click me</button>;Code language: JavaScript (javascript)

Here’s the complete code:

const App = () => {
  const handleClick = () => {
    alert('Clicked');
  };

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

export default App;Code language: JavaScript (javascript)

After having the event handler, when you click the button, it’ll execute the handleClick function that shows an alert.

By convention:

• An event handler starts with the word handle such as handleClick and handleSubmit.
• An event handler prop starts with the word on for example onClick and onSubmit.

Notice that we pass the function name to the onClick prop, not a function call. If you pass a function call to the onClick prop, the function will execute immediately:

const App = () => {
  const handleClick = () => {
    alert('Clicked');
  };

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

export default App;Code language: JavaScript (javascript)

If you want to call the handleClick function in the onClick prop, you need to define a function that calls the handeClick function:

export default function Event() {
  const handleClick = () => {
    alert("Clicked");
  };

  return <button onClick={() => handleClick()}>Click Me</button>;
}Code language: JavaScript (javascript)

Event object

Typically, an event handler receives an event object as an argument. The event object contains detailed information about the event that has occurred.

The event object is a wrapper of the native event object provided by the browser, which works cross-browsers.

The following example shows the value of an input element in the console window when the user changes the value:

const App = () => {
  const handleChange = (event) => {
    console.log(event.target.value);
  };

  return <input type="text" onChange={handleChange} />;
};

export default App;Code language: JavaScript (javascript)

In this example:

First, define an event handler that handles changes in the input element:

const handleChange = (event) => {
    console.log(event.target.value);
};Code language: JavaScript (javascript)

In the event handler, we show the value in the console window.

Second, assign the event handler as a prop of the input element:

<input type="text" onChange={handleChange} />Code language: JavaScript (javascript)

If the event handler is small, you define it inline directly in the JSX. For example:

const App = () => {
  return <button onClick={(event) => alert('Clicked')}>Click me</button>;
};

export default App;Code language: JavaScript (javascript)

In this example, we assign the arrow function as a prop of the onClick prop of the button element:

(event) => alert('Clicked')Code language: JavaScript (javascript)

Preventing default behavior

Some events have default browser behavior. For example, a <form> submit event will reload the whole page by default.

To stop the default browser behavior from occurring, you can call the preventDefault() method of the event object, for example:

const App = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form was submitted');
  };
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">
        Email:
        <input type="email" name="email" id="email" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default App;Code language: JavaScript (javascript)

Summary

• User interactions trigger events in a React app.
• Define a function or an event handler, and assign it as a prop of the JSX element to respond to the event.
• Call the preventDefault() of the event object method to prevent unwanted default browser behaviors.