Let’s Understand React DOM Events 


In this session we are going to understand React DOM events. So far you have learned To render UI with no interaction. In other words, you are just displaying data. Now we are going to create components that are smart enough to respond to the user actions.

So in this session, we are going to understand how to implement event in react.

React elements respond to user actions by defining event handlers for those actions. You do this by defining the event handler (function definition) as the value of an element attribute. Attributes that are event names, you use standard W3C DOM event names in camelCase, such as onClick or onMouseOver,

You can create an event handler like this

Now, this is just a syntax to define an event to the component. Now let’s see the actual way to specify an event to the component.

In this code, you can see we created a button and define an onClick event handler. We specify a handler function to the event with an event parameter. In this function just create a simple console.log to print a message on the console.

Now to inform react which component is firing this event you can use the bind method. The bind method bind the event to the component using a handler function.

The bind() is needed so that in the event handler function, you get a reference to the instance of the class (React element). If you don’t bind, this will be null.

So your button should look like this.

In the above code, we created a handler property and call that property in the handler event. you can specify event handler in the constructor by calling the name of the event handler method. we gonna learn everything one by one.

Moreover, you can find the event Handler to the class constructor also.

Functionally, there’s no difference; but if you’re using the same method more than once in render(), then you can reduce duplication by using the constructor binding.

You can see in the above code, we created a property and specify the event handler to it.

Synthetic Event

In this section, we will understand what is a synthetic event. so far We already familiar with dom event but now the next topic appears is a synthetic event.

SyntheticEvent is a cross-browser wrapper around the browser’s native event.

A synthetic event is just an object that looks like a normal browser event, but it takes care of some differences in how events work between different browsers. It has most of the (useful) fields and methods that a normal browser event has, and you can even access the ‘real’ browser event by looking at the nativeEvent field.

To be totally clear, there’s nothing magic about the name e — you can call an event whatever you want, just like any other parameter.

Basically, it’s React wrapping actual events in a JavaScript wrapper. So instead of onClick, it’s something like reactOnClick. The onClick event still fires ultimately in the browser, but it’s not what you as a programmer is actually calling.

This sort of pattern is called an abstraction. By disconnecting the code you write from how that code actually runs allows you to inject different implementations based on what you are writing for.

For Example

A Windows app or an Android app do not have an onClick event. If you used a native onClick event, that code wouldn’t work. But if you abstract it behind another call like reactOnClick, when you compile your React code, it can be made to replace reactOnClick with native click events for any platform.

This synthetic event system allows React to run in React Native for iOS and Android or in Electron for mobile apps Inside React event handlers, the event object is wrapped in a synthetic event object. These objects are pooled, which means that the objects received at an event handler will be reused for other events to increase performance. This also means that accessing the event object’s properties asynchronously will be impossible since the event’s properties have been reset due to reuse.

The following piece of code will log null because the event has been reused inside the SyntheticEvent pool:

To avoid this you need to store the event’s property you are interested in inside its own binding:

That’s it i hope you understand what is the synthetic event.

Example

Now let’s understand how to actually create an event in react.

In the above code, we create a three component. we created the two functional component and one class component. In this component, we created an event and using constructor property called the event method. Along with that, we bind the event to the component with the bind method.

Don’t forget to render this component in the react DOM method.

So That’s it. I hope you understand how to create an event in react.

Leave a Reply

Your email address will not be published. Required fields are marked *