React - Event

About

DOM - Event in React.

The React event e is a synthetic event defined according to the W3C spec (no worry about cross-browser compatibility ??)

Usage

Differences with the DOM event:

    • React events are named using camelCase, rather than lowercase.
    • With JSX you pass a function as the event handler, rather than a string.
  • Prevent Default behavior You cannot return false to prevent default behavior in React. You must call preventDefault explicitly.

Syntax

DOM

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

React

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

Prevent default behavior

To prevent the default link behavior of opening a new page, you can write:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

Example

Documentation / Reference


Powered by ComboStrap