React Module 6: React Events

34. React Module 6: React Events#

34.1. 1. What are React Events?#

Handling events with React elements is very similar to handling events on DOM elements. However, there are some syntax differences:

  1. React events are named using camelCase, rather than lowercase.

  2. With JSX, you pass a function as the event handler, rather than a string.

34.1.1. HTML vs. React#

HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

React:

<button onClick={activateLasers}>
  Activate Lasers
</button>

34.2. 2. Adding Events#

You can add event listeners to any DOM element returned by JSX.

34.2.1. Example: onClick#

function Button() {
  const shoot = () => {
    alert("Great Shot!");
  };

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

34.3. 3. Passing Arguments to Event Handlers#

To pass an argument to an event handler, use an arrow function or the specific function reference.

34.3.1. ❌ Wrong: Calling the Function Directly#

React calls the function immediately upon render if you add parentheses ().

<button onClick={shoot("Goal")}>Shoot</button> // Runs immediately!

34.3.2. ✅ Correct: Using an Arrow Function wrapper#

function Football() {
  const shoot = (a) => {
    alert(a);
  };

  return (
    <button onClick={() => shoot("Goal")}>Take the shot!</button>
  );
}

34.4. 4. The Event Object (e)#

React event handlers represent an instance of SyntheticEvent. This is a cross-browser wrapper around the browser’s native event. Arguments like event are essentially the same as in vanilla JS.

34.4.1. Usage#

Typically, the event object is the last argument if you pass others, or the first if you don’t.

function Football() {
  const shoot = (a, b) => {
    alert(b.type); // "click"
    console.log(b.target); // The button element
  };

  return (
    <button onClick={(event) => shoot("Goal", event)}>Take the shot!</button>
  );
}

If you don’t pass arguments, it’s passed automatically:

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

<input onChange={handleChange} />

34.5. 5. Preventing Default Behavior#

In HTML, you can sometimes return false to prevent default behavior. In React, you must call preventDefault explicitly.

34.5.1. Example: Form Submission#

function Form() {
  function handleSubmit(e) {
    e.preventDefault(); // Prevents page reload
    console.log("Form submitted!");
  }

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

34.6. 6. Common Event Types#

React supports every standard web event. Here are a few common ones:

  • Mouse: onClick, onMouseEnter, onMouseLeave

  • Form: onChange, onSubmit, onFocus, onBlur

  • Keyboard: onKeyDown, onKeyPress, onKeyUp

  • Clipboard: onCopy, onPaste

34.6.1. Example: onChange (For Inputs)#

function MyInput() {
  const [text, setText] = React.useState("");

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

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

34.7. 🔴 Quiz: React Events#

Q1: How are React events named? A) Lowercase (onclick) B) CamelCase (onClick) C) Uppercase (ONCLICK)

Q2: How do you prevent the default behavior of a form submit in React? A) Return false in the handler. B) Call event.preventDefault(). C) You cannot prevent it.

Q3: What causes a function to run immediately when the component renders, instead of waiting for the click? A) Passing the function name: onClick={handleClick} B) Calling the function with parens: onClick={handleClick()} C) Using an arrow function: onClick={() => handleClick()}

Q4: Which argument represents the event object? A) The first argument passed to the handler by default. B) The global window.event object. C) React events do not have event objects.

See Answers

A1: B. React uses camelCase for event attributes. A2: B. You must call preventDefault() explicitly. A3: B. Adding parentheses executes the function immediately during rendering. A4: A. The SyntheticEvent object is passed as the first argument (unless you wrap it and pass it elsewhere).

Contents