“This is the fifth day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

React The Breeze Blows your Face

React handles events in much the same way as native events.

  1. Listen for a specific event
  2. Add event handlers
export default function Button() {
  function onClick() {
    alert('You clicked me! ');
  }

  return (
    <button onClick={onClick}>
      Click me
    </button>
  );
}
Copy the code

This code listens for a click event. React events are written as a hump,on+ a specific event.

In addition to the above, event handler functions are directly inline within JSX

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

Pass event handlers

This can happen when a request is made and the requesting component throws the result back to the caller for processing, or in other cases.

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`Playing ${movieName}! `);
  }

  return (
    <Button onClick={handlePlayClick}>
      Play "{movieName}"
    </Button>
  );
}
Copy the code

The Button component click handler () function calls the props handlePlayClick function, so that the Button component doesn’t need to handle the event

The event bubbling

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={()= >{ alert('You clicked on the toolbar! '); }} ><button onClick={()= >alert('Playing! ')}> Play Movie</button>
      <button onClick={()= >alert('Uploading! ')}> Upload Image</button>
    </div>
  );
}
Copy the code

Full source code here

When you hit Play Moive it plays twice.

This is because js events bubble up from the target element, so when you click Play Moive, in addition to triggering your own event handler, the parent div event handler is also triggered.

Prevents events from bubbling

The first argument to the event handler is an event object, usually denoted by e. E.toppropagation () can be called to prevent bubbling

function Button({ onClick, children }) {
  return (
    <button onClick={e= > {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}
Copy the code

The complete code

Capture stage processing

Sometimes you need to add event handlers during the Capture phase. You can add Capture after the event name

<div onClickCapture={() = > { /* this runs first */}} ><button onClick={e= > e.stopPropagation()} />
  <button onClick={e= > e.stopPropagation()} />
</div>
Copy the code

Blocking default behavior

For example, to block link jumps or form submissions, use e.preventDefault()

export default function Signup() {
  return (
    <form onSubmit={()= >alert('Submitting! ')} ><input />
      <button>Send</button>
    </form>
  );
}

Copy the code

After submission, the entire page will be refreshed, the code

export default function Signup() {
  return (
    <form onSubmit={e => {
+ e.preventDefault();alert('Submitting! '); }}> <input /> <button>Send</button> </form> ); }Copy the code

Prevents default behavior from happening, complete code here