Code Playground.

Introduction

Respond upholds occasions that are upheld in JavaScript, and it works much the same way, however the huge distinction is its approach to utilizing the occasions. There are two massive contrasts:

To utilize JavaScript occasions in React, you really want to name it in camel case like eventName().
On the off chance that you use JSX with React, you really want to pass the occasion as a string with the occasion overseer.
JavaScript occasions are utilized to perform different activities in view of occasions like snap, contact, up, and down. Every one of the occasions, called engineered occasions, can be utilized in React. This guide will show how to utilize plain JavaScript occasions inside React parts.

Event Listener and the Event Function

Unlike JavaScript, React does not allow you to use event names as you do with JavaScript, like onclick(); hence you need to follow the event name as onClick().

You can still use plain JavaScript events using the window object used to represent the DOM document opened in the current browser window.

Implementing JavaScript `click` Event

A tick occasion is the most well-known occasion used to set off a capacity in light of the snap occasion on the components like button, mark, length, interface, and so on. To add the snap occasion in React utilizing plain JavaScript, you want to utilize addEventListener() to relegate the snap occasion to a component.

Make one <button> component as ref props with the goal that setting off the snap event can be gotten to.

render() {
    return (
      <>
        <button ref={mybutton => (this.btn = mybutton)}>Click me</button>
      </>
    );
}

The <button> component has extra props called ref that are utilized to track down the component from the DOM. To allocate the JavaScript click occasion controller, you can execute it as shown beneath.

componentDidMount() {
    this.btn.addEventListener("click", this.onButtonClick);
}

addEventListener() assigns the event handler and the event name to do an activity once the button gets clicked.

onButtonClick() {
    alert("Clicked on Button");
}

Once you click the button, it will show the alert box that the click event is triggered.

Implementing JavaScript `change` Event

The change occasion sets off the occasion in light of the current worth and cycles changes in view of the changed worth. Utilizing the addEventListener(), you can allocate change as the occasion controller followed by the occasion overseer work as given underneath.

componentDidMount() {
    this.input.addEventListener("change", e => this.onChange(e));
}

Then, you can implement the event handler function to process the updated values.

onChange(e) {
    console.log("Updated values is :-", e.target.value);
}

Alternatively, you can remove the listener using document.getElementByID() along with the addEventListener() as given below.

document.getElementById("#your_id").addEventListener("change", this.onChange);

Remove the Event Listener and Assigned Event Function

Up until this point, this guide has told the best way to characterize the JavaScript occasion overseer and related occasion controller work. Yet, you ought to eliminate the audience once the ongoing part gets unmounted from the DOM.

To eliminate the occasion audience, you can utilize removeEventListener() alongside the occasion type and the occasion overseer work.

componentWillUnmount() {
    this.btn.removeEventListener("click", this.onButtonClick);
    this.input.removeEventListener("change", e => this.onChange(e));
}

As you can find in the above code, the componentWillUnmount() work is carried out for anything that necessities to get taken out, like guarantees and occasions.

Inside the capacity, two occasions eliminated are from the DOM, snap and change, trailed by the occasion controller work, so you can utilize the removeEventListener() to eliminate the joined occasions from the part.

On the other hand, you can eliminate the audience utilizing document.getElementByID() alongside removeEventListener().

document.getElementById("#your_id").removeEventListener("change", this.onChange);

Conclusion

Respond upholds a large portion of the JavaScript occasions however with an alternate variant of the naming show; henceforth, you ought to just utilize the React-based naming show and not the plain JavaScript occasions with the React components.

Occasions handle the component's reaction in view of activities like snap, contact, drag, up, down, and so forth. To perform explicit occasions, you can utilize different React manufactured occasions to set off any activities.