Event handlers are extremely important for building any type of web application in React. In this article, we will talk two of the most important event handlers - onClick and onKeyDown. React has a complex system in place for handling events, centered around SyntheticEvent object.
onClick – the most important event handler in React
This event handler allows you to respond every time user clicks a button, container, text, or any other element in React. The concept is pretty simple – do something every time user clicks a button. In React, we use event handler functions to do that thing. The function could perform side effects, update state variables, or update ref.
Sometimes browsers have default behavior for clicks. For example, when user clicks on an anchor tag, they will be redirected to another page. You can still set onClick on anchors, and even on Link component from React Router.
onKeyDown - The Keyboard Conductor
Click is the most important, but not the only event handler in React. There’s also onKeyDown, which triggers any time there’s a focus on a certain element and user presses down a certain key. onClick responds to mouse clicks on the element, whereas onKeyDown responds to keyboard events. It also allows you to conditionally respond to when specific keys are pressed. This way, it’s somewhat similar to click events.
Here's a simple example:
<input type="text" onKeyDown={this.yourOtherFunction} />
In this case, React calls yourOtherFunction when it notices that user pressed a key when input element was in focus.
Important difference is that for onKeyDown to trigger, element needs to be in focus. If you’re looking for a way to catch key press events even when element is not in focus, you can use onKeyPress event handler instead. Set it to the main container on the page.
Differences
Similarities between onClick and onKeyDown are self evident. Both allow you to handle events pressing a certain button. In case of onClick, that is click of a mouse button. In case of onKeyDown, it responds to clicks on the keyboard.
However, there are also many differences. One is that for onKeyDown to work, element needs to be focused. Also, events are different. Click event is simpler. In case of onKeyDown, you can look at SyntheticEvent to find out which key was pressed, and respond accordingly.
Benefits of using event handlers to control components
Let’s look at examples of event handlers for keydown and click events.
We typically use event handlers to update the state to reflect latest changes in the input. Often these inputs also get their value from the state. Components that follow this pattern are called controlled components. React recommends to follow this pattern to maintain consistency of data.
When you use event handlers to update the state, changes to user input are reflected on the page. This is because React re-renders the component every time there’s a change in the state. This is an important UX feature for building dynamic applications in React.
Storing user inputs In the state also makes it easier to validate user inputs. Every user input is a JavaScript value – a string, Boolean, or any other type. You can write a function or call methods to check input values against specified criteria.
Top comments (0)