React.js: Events

Table of Contents

• Events
• Examples
  • onClick Event
  • onChange Event on a Text field
  • onChange Event on a Drop Down field
  • onMouseOver and onMouseOut

Once we created Components on our React.js application, we can add interactivity using Events.
The Events names are similar to the standard html events, although in React.js they use the camelCase naming convention, i.e., onClick, onChange, and so on.

You can read more about React.js Events on this url: https://reactjs.org/docs/events.html

Some examples of common events are onClick, onChange, onMouseOver, and onMouseOut.

The onClick event will be triggered when applying the mouse's left button on an html element.

The following example shows the onClick event applied to an html button. On this example the event will call a function named handleClick. We can name our handler functions with any name we find more appropiate.

Note that when we assign the function to the event, we use "handleClick" and not "handleClick( )" because we want to pass the function, and not the value returned from the execution of the function.

import React from "react";

function Sample1() {
    function handleClick() {
        alert('Sample onClick event');
    }

    return (
        <div>
            <h1>Sample Component 1</h1>
            <small>Sample onClick event</small>
            <div><input type="button" value="Click Me" onClick={handleClick} /></div>
        </div>
    );
}

function App() {
    return (
        <>
            <Sample1 />
        </>
    );
}

export default App;

This example shows the onChange event applied to a text box field.
The event will be triggered when the text entered into the field is modified.

import React from "react";

function Sample2() {
    function handleChange(event) {
        const value = event.target.value;
        console.log('Sample onChange event on a text field');
        console.log(value);
    }

    return (
        <div>
            <h1>Sample Component 2</h1>
            <small>Sample onChange event on a text field</small>
            <div><textarea onChange={handleChange} placeholder="Enter any text..."></textarea></div>
        </div>
    );
}

function App() {
    return (
        <>
            <Sample2 />
        </>
    );
}

export default App;

In this example, we also show the onChange event, but this time it is being applied to a drop down field. The event will be triggered when a different selection is made.

import React from "react";

function Sample3() {
    function handleChange(event) {
        const value = event.target.value;
        console.log('Sample onChange event on a drop down field');
        console.log(value);
        document.getElementById('div-sample3').style.backgroundColor = value;
    }

    return (
        <div>
            <h1>Sample Component 3</h1>
            <small>Sample onChange event on a drop down field</small>
            <div>
                <select onChange={handleChange}>
                    <option value="white">Select a color:</option>
                    <option value="red">Red</option>
                    <option value="green">Green</option>
                    <option value="blue">Blue</option>
                </select>
            </div>

            <div id="div-sample3" style={{border:"1px dotted black", height:"100px", width:"100px"}}></div>
        </div>
    );
}

function App() {
    return (
        <>
            <Sample3 />
        </>
    );
}

export default App;

This example shows that we can also detect changes on the mouse position, specifically when it is moved over and out of a specified area, by using the onMouseOver and onMouseOut events.

import React from "react";

function Sample4() {
    function handleMouseOver(event) {
        document.getElementById('div-sample4').innerHTML = 'Mouse Over';
    }

    function handleMouseOut(event) {
        document.getElementById('div-sample4').innerHTML = 'Mouse Out';
    }        

    return (
        <div>
            <h1>Sample Component 4</h1>
            <small>Sample onMouseOver and onMouseOut events on a div</small>

            <div id="div-sample4" style={{border:"1px dotted black", height:"100px", width:"100px"}}
                onMouseOver={handleMouseOver}
                onMouseOut={handleMouseOut}
            >Move the mouse over this area</div>
        </div>
    );
}

function App() {
    return (
        <>
            <Sample4 />
        </>
    );
}

export default App;

See a live demo of the above code on StackBlitz here.

Related Posts