React Event Handling

1. Adding Event Handlers in React

React uses camelCase for event names, such as onClick, onChange, and onSubmit. Event handler functions can be defined directly inline or separately and then referenced in JSX.

Here’s an example of using an inline event handler:

Edit Copy

function ClickButton() {
    return (
        <button onClick={() => alert("Button clicked!")}>Click Me</button>
    );
}

In this example, an alert is triggered when the button is clicked.

2. Defining Event Handlers as Functions

Instead of using inline functions, it’s often better to define event handlers separately. This improves code readability and allows the handler to be reused if needed.

Here’s an example:

Edit Copy

function Greeting() {
    function handleClick() {
        alert("Hello, World!");
    }

    return <button onClick={handleClick}>Greet</button>;
}

In this example, handleClick is defined separately and then used as an event handler for the button.

3. Passing Arguments to Event Handlers

To pass arguments to an event handler, use an arrow function within the event handler. This approach allows you to specify parameters while avoiding automatic execution of the function.

Here’s an example:

Edit Copy

function Greeting() {
    function sayHello(name) {
        alert(`Hello, ${name}!`);
    }

    return (
        <button onClick={() => sayHello("Alice")}>Say Hello</button>
    );
}

In this example, the sayHello function accepts a name as an argument.

4. Using Synthetic Events in React

React wraps native browser events with a cross-browser wrapper called SyntheticEvent. This wrapper provides consistent event properties across different browsers, improving compatibility.

Example of accessing event properties:

Edit Copy

function InputField() {
    function handleChange(event) {
        alert(`Input value: ${event.target.value}`);
    }

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

In this example, handleChange accesses the input value through event.target.value.

5. Common Event Types

React supports various event types, such as:

• onClick – for handling button clicks.
• onChange – for handling input changes.
• onSubmit – for handling form submissions.
• onMouseEnter / onMouseLeave – for handling mouse hover events.

Here’s an example using the onMouseEnter and onMouseLeave events:

Edit Copy

function HoverBox() {
    function handleMouseEnter() {
        console.log("Mouse entered");
    }

    function handleMouseLeave() {
        console.log("Mouse left");
    }

    return (
        <div
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
            style={{ width: "100px", height: "100px", backgroundColor: "lightblue" }}
        >
            Hover over me!
        </div>
    );
}

In this example, messages are logged to the console as the mouse enters and leaves the div.

6. Summary

In this tutorial, you learned how to handle events in React using camelCase event names and function references. You also explored passing arguments to event handlers, using synthetic events, and some common event types.