React - Event
Table of Contents
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 ??)
Articles Related
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
- [[https://facebook.github.io/react/docs/events.html|React SyntheticEvent reference guide]