React Events are used to respond to actions performed by users, such as clicking a button, typing in an input field, submitting a form, moving the mouse, or pressing a keyboard key.
onClick, onChange, onSubmit,
and onMouseOver to respond to user interactions.
An event is an action that happens in the browser. For example, when a user clicks a button, a click event occurs.
Common user events include:
React provides event handlers through JSX attributes.
<button onClick={handleClick}>
Click Me
</button>
Here, onClick tells React which function should run when
the button is clicked.
The onClick event is used when an element is clicked.
function App() {
function handleClick() {
alert("Button clicked!");
}
return (
<button onClick={handleClick}>
Click Me
</button>
);
}An event handler is a function that runs when a particular event occurs.
function handleClick() {
console.log("Button was clicked");
}The function can then be assigned to an event.
<button onClick={handleClick}>
Click
</button>Pass the function itself to the event handler.
<button onClick={handleClick}>
Click
</button>Do not call the function while rendering:
<!-- Avoid this -->
<button onClick={handleClick()}>
Click
</button>
Using handleClick allows React to call the function when
the event occurs.
An event handler can also be written directly inside JSX.
function App() {
return (
<button
onClick={() => alert("Hello React")}
>
Click Me
</button>
);
}A function can be defined separately and passed to the event.
function App() {
function showMessage() {
alert("Welcome to React!");
}
return (
<button onClick={showMessage}>
Show Message
</button>
);
}
The onChange event is commonly used with form inputs.
function App() {
function handleChange(event) {
console.log(event.target.value);
}
return (
<input
type="text"
onChange={handleChange}
/>
);
}The event object provides information about the element that triggered the event.
function handleChange(event) {
console.log(event.target.value);
}
The value property contains the current input value.
The onSubmit event is used when a form is submitted.
function App() {
function handleSubmit(event) {
event.preventDefault();
alert("Form submitted!");
}
return (
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">
Submit
</button>
</form>
);
}
Forms normally reload or navigate the page when submitted.
preventDefault() prevents the browser's default action.
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted");
}React supports several mouse-related events.
onClickonDoubleClickonMouseEnteronMouseLeaveonMouseOveronMouseOutonMouseDownonMouseUp
The onMouseEnter event runs when the mouse pointer enters
an element.
function App() {
function handleMouseEnter() {
console.log("Mouse entered");
}
return (
<div onMouseEnter={handleMouseEnter}>
Move the mouse here
</div>
);
}
The onMouseLeave event runs when the mouse pointer leaves
an element.
function App() {
function handleMouseLeave() {
console.log("Mouse left");
}
return (
<div onMouseLeave={handleMouseLeave}>
Move the mouse away
</div>
);
}React also supports keyboard events.
onKeyDownonKeyUponKeyPress is an older event and is generally avoided in modern code.function App() {
function handleKeyDown(event) {
console.log(event.key);
}
return (
<input
onKeyDown={handleKeyDown}
/>
);
}The event object provides information about which key was pressed.
function handleKeyDown(event) {
console.log(
"Pressed:",
event.key
);
}
For example, pressing Enter can produce Enter as the key
value.
React passes an event object to an event handler when the event occurs.
function handleClick(event) {
console.log(event);
}The event object contains useful information about the event and the element involved.
The event.target property refers to the element that
triggered the event.
function handleClick(event) {
console.log(event.target);
}It can be useful when working with buttons, inputs, and other interactive elements.
If an event handler needs an additional value, use an arrow function.
function showStudent(name) {
alert(name);
}
function App() {
return (
<button
onClick={() => showStudent("Rahul")}
>
Show Student
</button>
);
}Event handler functions can also be passed from a parent component through props.
function Button({ onClick }) {
return (
<button onClick={onClick}>
Click Me
</button>
);
}function App() {
function handleClick() {
alert("Clicked from parent");
}
return (
<Button
onClick={handleClick}
/>
);
}This allows the child button to trigger logic defined in the parent.
Events are often used to update React state.
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function increase() {
setCount(count + 1);
}
return (
<div>
<p>
Count: {count}
</p>
<button onClick={increase}>
Increase
</button>
</div>
);
}A component can have multiple event handlers.
function App() {
function handleClick() {
console.log("Clicked");
}
function handleMouseEnter() {
console.log("Mouse entered");
}
return (
<button
onClick={handleClick}
onMouseEnter={handleMouseEnter}
>
Button
</button>
);
}Events can be attached to many HTML elements.
<button onClick={handleClick}>
Click
</button>
<input onChange={handleChange} />
<form onSubmit={handleSubmit}>
...
</form>
<div onMouseEnter={handleMouseEnter}>
Hover
</div>React event names use camelCase.
Correct:
onClick
onChange
onSubmit
onMouseEnter
onKeyDown
HTML traditionally uses lowercase event attributes such as
onclick, but React uses camelCase names.
React events are commonly used for interactive forms.
function Login() {
function handleSubmit(event) {
event.preventDefault();
console.log("Login submitted");
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Username"
/>
<input
type="password"
placeholder="Password"
/>
<button type="submit">
Login
</button>
</form>
);
}A common mistake is calling the event handler immediately during rendering.
Incorrect:
<button onClick={handleClick()}>
Click
</button>Correct:
<button onClick={handleClick}>
Click
</button>For a function that needs parameters, use an arrow function.
<button
onClick={() => handleClick("Rahul")}
>
Click
</button>Events make React applications interactive.
import { useState } from "react";
function App() {
const [name, setName] = useState("");
function handleChange(event) {
setName(event.target.value);
}
function handleClick() {
alert("Hello " + name);
}
return (
<div>
<h2>
React Events
</h2>
<input
type="text"
value={name}
onChange={handleChange}
placeholder="Enter your name"
/>
<br />
<br />
<button onClick={handleClick}>
Say Hello
</button>
</div>
);
}
export default App;
This example uses onChange to read input and
onClick to respond to a button click.
onClick.preventDefault() when appropriate for forms.onClick handles click events.onChange is commonly used with input fields.onSubmit handles form submission.event.target identifies the element involved in the event.Question: Which React event is commonly used to handle a button click?