Events Handling in React

In React, events are handled similarly to how they are handled in regular HTML. However, in React, event handling is done using JSX syntax, and React provides its own synthetic event system, which is compatible with most browser events.

• User Action: The user interacts with the UI (e.g., clicks a button).
• Event Triggered: The corresponding event is fired.
• SyntheticEvent Created: React creates a synthetic event to normalize the behavior.
• Cross-Browser Consistency: Ensures the event works the same across all browsers.

Creating React Application to Handle Events:

Step 1: Create a React application using the following command.

npx create-react-app Name-for-your-app
cd Name-for-your-app

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Now let's understand this with the help of example:

import React, { useState } from "react";

function App() {
    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(count + 1);
    };

    return (
        <div className="App">
            <h1>Hello React!</h1>
            <div>
                <p>Count: {count}</p>
                <button onClick={handleClick}>Click me</button>
            </div>
        </div>
    );
}
export default App;

Output:

Types of Event Handling

Here are some common types of event handling in react

1. onClick

This event is used to detect mouse clicks in the user interface.

function handleClick() {
  alert('Button clicked!');
}

<button onClick={handleClick}>Click me</button>

2. onChange

onChange in React is triggered when the value of an input element (like text, checkbox, or select) changes. It is commonly used to capture user input and update the component's state.

function handleChange(event) {
  console.log(event.target.value);
}

<input type="text" onChange={handleChange} />

3. onSubmit

Triggered when a form is submitted. It can be used to validate data before sending it.

function handleSubmit(event) {
  event.preventDefault();
  alert('Form submitted!');
}

<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>

4. onKeyDown

Occurs when a key is pressed down, useful for handling keyboard inputs in text fields.

function handleKeyDown(event) {
  console.log('Key pressed:', event.key);
}

<input type="text" onKeyDown={handleKeyDown} />

5. onKeyUp

Fired when a key is released, often used for actions that depend on the final input.

function handleKeyUp(event) {
  console.log('Key released:', event.key);
}

<input type="text" onKeyUp={handleKeyUp} />

6. onMouseEnter

Triggered when the mouse pointer enters an element, typically used for hover effects.

function handleMouseEnter() {
  console.log('Mouse entered the div!');
}

<div onMouseEnter={handleMouseEnter}>Hover over me</div>