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:

👁 Screenshot-2024-02-06-213433

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:

Output:

👁 Animation31

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.

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.

3. onSubmit

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

4. onKeyDown

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

5. onKeyUp

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

6. onMouseEnter

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