JavaScript Event handling is a fundamental part of front-end development. It is an action that can be triggered as a result of a user action. Like mouse click, window resize, key press, etc.

React Event Handling

React has its own Event handling system known as Synthetic Events. It is very similar to standard DOM events.

This synthetic event system wraps native browser events and provides a consistent cross-browser API.

Handling Events in React have some important syntactic differences like:

1 – As we learned in JSX Attributes, React Event names should be written in camelCase instead of lowercase names in regular HTML & vanilla JavaScript. For example `onClick` instead of `onclick`.

2 – In JSX, a function should be passed as the event handler instead of a string. For example: Instead of declaring like this:

<button onClick="submitForm()">Submit</button>

Do like this. This is the event declaration in React.

<button onClick={submitForm}>Submit</button>

Let’s see some example of Event Handling in React:

Here, I have created an event handler function called `handleClick`, then I have added this function into the button element using the `onClick` attribute.

When the user clicks on that button, the `handleClick` function will be executed. See the code example below:

function App() {

const handleClick = () => {
console.log("Button Clicked")
};

return (
<div className="App">
<button onClick={handleClick}>Click Me!</button>
</div>
);
}

export default App;

 

When you click on the button, the log value is getting printed on the browser console. so our event handler function is working properly.

See the below screenshot:

 

Event Handler in Class Component

Defining the event handler & Attaching the event handler to the JSX elements method within the Class Components is little different than the functional components. See the code below:

import React, {Component} from 'react' class User extends Component {
handleClick = () => {
console.log("Button Clicked")
};

render(){ 
return (
<button onClick={this.handleClick}></button>
)
}
}

export default User;

 

Passing Arguments

You can pass arguments to an event handler by using Arrow Functions in React. Let’s see some examples.

In the below code example, I have used an Arrow Function as the `onClick` event handler and passed a string value “Button Clicked” as an argument to the `handleClick` function.

See the code carefully.

function App() {

const handleClick = (value) => { console.log(value)
};

return (
<div className="App">
<button onClick={() => handleClick("Button Clicked")}>Click Me!</button>
</div>
);
}
export default App;

 

Output: When that function is executed, the argument “Button Clicked” as log value is getting printed on the browser console. so it is working properly.

Event Object in a React event handler

When an event is executed, a synthetic event object is created and passed as an argument
to the event handler function in React.

Let’s see the example of how you can access the synthetic event object in a React event handler:

function App() {

const handleClick = (e) => { console.log(e.target)
};

return (
<div className="App">
<button onClick={handleClick}>Click Me!</button>
</div>
);
}
export default App;

 

When the function will be executed, the output will come in the browser console like this:

But, when you pass arguments to the event handler by using arrow function, in that case, the event object is not automatically passed as an argument to the arrow function.

So in order to access the synthetic event object in that case, you have to pass it explicitly as an argument to the arrow function. Something like this:

function App() {

const handleClick = (e) => { console.log(e.target)
};

return (
<div className="App">
<button onClick={(e) => handleClick(e)}>Click Me!</button>
{/* note this syntax */}
</div>
);
}

export default App;

I hope you have understood everything 🙂