This page is about DOM event handling in React.
The React event e is a synthetic event defined according to the W3C spec (no worry about cross-browser compatibility ??)
Differences with the DOM event:
<button onclick="activateLasers()">
Activate Lasers
</button>
<button onClick={activateLasers}>
Activate Lasers
</button>
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>
);
}
With Typescript, you need to define that the event is a React event.
Otherwise, you get:
... is missing the following properties from type 'MouseEvent': offsetX, offsetY, x, y, and 14 more.
Example:
<tr onClick={(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => onRowDoubleClick(event, ...)}>
....
</tr>