Introduction
Events are some type of interaction between the user and the app, the user performs some action resulting in some reaction from the app. Any time a user clicks, drag-and-drop, fills in the input field or hovers over an element an event occurs. We as a Developer defines the function to respond to the event that occurred. These functions are event handlers and they are the core of the event management system. Event management is actually a set technique used to handle such events.
In this blog we will be looking into the concepts of event management in React, we will also be seeing different types of events and techniques to handle those events.
Differences Between React and HTML Events Handling
If you are using react you are most probably familiar with DOM events in javascript.
The basic idea behind event management is we define some handler functions that respond with respect to the event that occurred.
This is an onclick DOM event that triggers the handleClick( ) function when a click event occurs on the button, this basic idea is common in javascript and React, but there are a couple of nuances that differentiate them.
Event Handling in React and HTML are different in terms of syntax and some rules. The reason behind this is that HTML has access to the Real DOM all the time whereas React follows the concept of Virtual DOM. Let’s see how we can add events in HTML and how React event handling differs from HTML.
In HTML, there are two approaches for handling events by either specifying the javascript function or using the addEventLisener of javascript to specify the events and listener.
Here we have created two buttons that greet the user with Good Morning whenever the user clicks on the button. For the first button, we are specifying the event using the first method “onclick” and provided “wish( )” as a string along with the parenthesis at the end. As you can see on the second button we are specifying the id. We are using the second method i.e. addEventListener, we have provided the event click and given a callback.
In React, as we use the concept of virtual DOM so we need to specify all events at the time of component creation. Here we have defined the event “onClick” written in camelcase and provided a method name instead of a string. As React uses JSX so we need to specify the method in curly braces ( { } ).
Note: Here we didn’t call the wish function inside curly braces, calling it like { wish( ) } will call the handler each time the element is rendered.
Key Difference in Event Management of HTML and React :
| In HTML | In ReactJS |
|---|---|
| we specify events using normal conventions like “onclick” , “onsubmit”. | we specify events using camel case conventions like “onClick”, “onSubmit”. |
| The event listener is provided in the form of a string. | we provide or bind listener in the form of function name or method name as a variable |
| The listener passed have parenthesis ( ) at the end in order to work. | we only provide a function or method name, providing ( ) will call the method on every rerendering of the element. |
| The event can be added afterward using addEventListener. | All events are specified at the time of component creation. |
Events Handling in Function Components
In the functional component, the handler is passed as an attribute to the element or component. The attribute receives a function when the user interacts with the element.
Handling onClick event
When a user clicks on the element a click event is triggered and the function is called as many the as the user clicks. Let’s see an example :
This will log “Hello user ! Great to see you” in the console as many times the event occurs.
Passing Parameters into Events
To pass values or parameters we must use an actual function or arrow function to pass values to the function. Let’s see an example of passing value to the handler:
Handling onSubmit Event
Sometimes you will find yourself in a situation where you need to prevent the default behavior of the browser. For example, “onsubmit” event of JavaScript. The default behavior is to send form data and reload the webpage. But sometimes we might want to prevent this default behavior. JavaScript has a quite handy trick to do this.
Here we have defined the handler function in the usual way but with a little trick of return false. This is actually the way how JavaScript prevents the default behavior. If we do not put this return false the webpage will reload before the console gets the chance to log the message.
React doesn’t support this trick, to prevent the default browser behavior we explicitly have to call the preventDefault function.
We have to use preventDefault( ) method to prevent the webpage to reload after sending the data on form submission.
React onChange vs HTML onchange
In React, whenever a user inputs anything the “onChange” event is triggered and calls the handler function each time the user inputs anything. It behaves like the “oninput” event in the HTML. However, the HTML “onchange” event is totally different from the concept that React follows for the onChange.
In HTML, the “onchange” event triggers when the input loses focus and is not on each input. It behaves the same as the “onBlur” event in React where the handler function is called when input loses focus.
The main difference between these two is quite clear from the above example.
However, there is no difference between React “onInput” and HTML “oninput” event.
Let’s see a clear comparison between these events :
Conclusion
We have seen in this blog that the Event management in React and Javascript are very similar with few differences in syntax and propagation. There are many more events in Reacts that can be handled in the same way as the “onClick” event is handled. To learn more about React follow the below links :
React Tutorial: https://reactjs.org/tutorial/tutorial.html
Free and Paid Courses list: https://reactjs.org/community/courses.html
