Handling Events With React

Handling events with React elements is very similar to handling events on DOM elements. More info

Articles & Tutorials

Back to Basics: Event Handling in React (alligator.io)
Jul 17, 2019
What are event handlers, and why are they important? Event handlers make a website’s user experience a two-way street. You’re not just presented with nicely styled content… you can actually click, type, scroll it!
  • William Le
React onClick Event Handling (With Examples) (upmostly.com)
Jun 25, 2019
In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app.
  • James King
How to detect an outside click with React and Hooks (medium.freecodecamp.org)
Mar 18, 2019
An outside click is a way to know if the user clicks everything BUT a specific component. You may have seen this behavior when opening a dropdown menu or a dropdown list and clicking outside of it to close it.
  • Andrei Cacio
Dealing with callbacks as props in React (dev.to)
Feb 17, 2019
React is a great library. It simplifies our work. We don't write all mutations ourselves, we describe result in render functions. Sometimes we have to render huge lists or optimize our code. In those case, we usually use PureComponent and memo. But, if we don't use callbacks correctly we can lose all profit from PureComponent. So, how to deal with callbacks and event listeners in React?
  • Nikita Mostovoy
Give names to behaviors not interactions (sid.studio)
Dec 28, 2018
We have this Switch component that accepts a prop, let’s call it something for now.
Working With Events in React (css-tricks.com)
Sep 07, 2018
Let’s go over how to create, add and listen for events in React.
  • Kingsley Silas
A guide to React onClick event handlers (blog.logrocket.com)
Jul 10, 2018
Event handlers are used to determine what action is to be taken whenever an event is fired. This could be a mouse click or a change in a text input.
  • Yomi Eluwande
The best way to bind event handlers in React (medium.freecodecamp.org)
May 08, 2018
Binding event handlers in React can be tricky (you have JavaScript to thank for that).
  • Charlee Li

Video Guides & Talks

Debug React's Event System (youtube.com)
Aug 10, 2018
In my efforts to understand React's event system and how it relates to real browser events (so I can fire real browser events to call event handlers), I learned a few things you may find interesting :)
React event API and you (youtube.com)
Apr 12, 2018
React comes with a full event API. It's great. No more addEventListener, no more memory leaks. But there's one bit that's hard 👉`this`
React events in depth w/ Kent C. Dodds, Ben Alpert, & Dan Abramov (youtube.com)
Sep 01, 2016
Based on a recent pull request in the React repo (https://github.com/facebook/react/pull/7616) it was suggested that we chat about how events in React work. Ben and Dan were eager to have this conversation with me :)