Event handlers

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:

TIP

React events are named using camelCase, rather than lowercase. With jsx you pass a function as the event handler, rather than a string.

Lets see an HTML code:

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

Same code in React:

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

To prevent default behavior in React you must call preventDefault explicitly like this:

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

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

Here, e is a synthetic event. React defines these synthetic events according to the W3C spec, so you don’t need to worry about cross-browser compatibility. React events do not work exactly the same as native events. See the SyntheticEvent (opens new window) reference guide to learn more.

Passing arguments

Inside a loop, it is common to want to pass an extra parameter to an event handler. For example, if id is the row ID, you can do this:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>