ReactJS | Event Management

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS Event Management.

Event management is one of the important features in a web application. It enables the users to interact with the application. React has support for all events available in a web application. React event handling is similar to DOM events with little changes.

Let us learn how to handle events in a React application in this tutorial.

Let us look into the step-by-step process of handling an event in a React component.

• Define an event handler method to handle the given event.

log() { 
   cosole.log("Event is fired"); 
}

React provides an alternative syntax using lambda function to define event handler. The lambda syntax is -

log = () =;> { 
   cosole.log("Event is fired"); 
}

If you want to know the target of the event, add an argument e in the handler method. React will send the event target details to the handler method.

log(e) { 
   cosole.log("Event is fired"); 
   console.log(e.target); 
}

The alternative lambda syntax is -

log = (e) => { 
   cosole.log("Event is fired"); 
   console.log(e.target); 
}

READ: ReactJS | Component Collection

If you want to send extra details during an event, then add the extra details as initial argument and add argument (e) for event target.

log(extra, e) { 
   cosole.log("Event is fired"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}

The alternative lambda syntax is -

log = (extra, e) => { 
   cosole.log("Event is fired"); 
   console.log(e.target); 
   console.log(extra); 
   console.log(this); 
}

Next, bind the event handler method in the constructor of the component. This is going to ensure the availability of this in the event handler method.

constructor(props) { 
   super(props); 
   this.logContent = this.logContent.bind(this); 
}

If the event handler is defined in alternative lambda syntax, the binding is not required. this keyword will be automatically bound to the event handler method.

Now, set the event handler method for the specific event as specified below -

<div onClick={this.log}> ... </div>

To set additional arguments, bind the event handler method and finally pass the added information as second argument.

<div onClick={this.log.bind(this, extra)}> ... </div>

The alternative lambda syntax is as follows -

<div onClick={this.log(extra, e)}> ... </div>

Here,

• Create an event-aware component

• Introduce events in Expense manager app

READ: ReactJS | Nested Components

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about how to create an event-aware component.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.