React - Event

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - 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 ??)

Advertising

3 - 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.

3.1 - Syntax

DOM

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

React

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

3.2 - 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>
  );
}
Advertising

4 - Example

5 - Documentation / Reference

web/javascript/react/event.txt · Last modified: 2019/06/17 10:39 by gerardnico