Event Handling In ReactJS

In this article, you will learn about Event Handling in ReactJS and get the answers to the following questions:

1. What is Event
2. What is SyntheticEvent?
3. Why is SyntheticEvent required?
4. Event Examples?
5. Can we call Multiple functions onClick Event and pass?

1. What is an Event?

An Event is a reaction to user action on UI (User Interface).

Standard events are like,

• OnClick, OnBlur, etc . ..

ReactJS support the following categories of events,

• Clipboard Events
• Composition Events
• Keyboard Events
• Focus Events
• Form Events
• Generic Events
• Mouse Events
• Pointer Events
• Selection Events
• Touch Events
• UI Events
• Wheel Events
• Media Events
• Image Events
• Animation Events
• Transition Events
• Other Events

2. What is SyntheticEvent?

SyntheticEvent is a cross-browser wrapper around the browser's native event.

SyntheticEvent supports all events to adapt on different browsers easily.

For more info, refer https://reactjs.org/docs/events.html.

3. Why is SyntheticEvent required?

As you know, UI is different from browser to browser. That's the same way event understanding is different from browser to browser.

SynthenticEvent passes the event as per the demand of the browser and understanding of the browser. In short, in ReactJS user is not directly interacting with the DOM event, the user is interacting with SyntheticEvent.

4. Event Example

Button Click Event

<button onClick={DispMsg}>Message</button>

You can see the above line of code where on onclick calling DISPMSG function inside curly braces.

Example

MessageDisplay.JS Code

import React from 'react';
function MessageDisplay(){
    const DispMsg = (e) => {
        e.preventDefault();
        alert("Welcome to learn Button Click Event.");
    }
return(
    //Click on Button to get alert message . .!
    <button id="btnMsg" onClick={DispMsg}>Message</button>
   );
}
export default MessageDisplay;

App.JS Code

import React from 'react';
import MessageDisplay from './MessageDisplay';
function App() {
  return (
    <div>
      <br/>
      <br/>
      <br/>
      <MessageDisplay></MessageDisplay>
    </div>
  );
}
export default App;

OUTPUT

TextBox Change Event

Example 1: in the following example, onchange calls the HANDLECHANGE function.

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

Example 2: in the following example, onchange inline event handling with an update state variable called FULLNAME.

<input type="text" id="txtFullname" onChange={(e) => {setFullname(e.target.value)}} value={Fullname}/>

Sample Code

MemberForm.js Code

import {useState} from 'react';
function MemberForm() {
    const [Fullname, setFullname] = useState("");

    function DispFullName() {
        alert(Fullname);
    }
return (
<div>
    Enter Your Fullname:
    <input type="text" id="txtFullname" onChange={(e) => {setFullname(e.target.value)}} value= 
    {Fullname}/>
        <button id="btnMsg" onClick={DispFullName}>Get Fullname</button>
     </div>
    );
}
export default MemberForm;

App.js Code

import React from 'react';
import MemberForm from './MemberForm';
function App() {
    return (
        <div>
            <br/>
            <br/>
            <br/>
            <MemberForm></MemberForm>
        </div>
        );
    }
export default App;

OUTPUT

5. Can we call Multiple functions onClick Event?

Yes, we can call multiple functions in the onclick event. But in this example, you learn two things:

1. How to call multiple functions?
2. How to pass parameter onclick?

MultiFuncOnClickButton.js Code

function MultiFuncOnClickButton() {
    function DispMsg1(arg) {
        alert(arg);
    }
    function DispMsg2(arg) {
        alert(arg);
}
//Button element we are calling and passing value to function DispMsg1, DispMsg2.
return(
    <div>
        <button onClick={()=> {DispMsg1("Hello Function 1");DispMsg2("Hellow Function 2")}}>Click Me!</button>
    </div>
  );
}
export default MultiFuncOnClickButton;

App.js Code

import React from 'react';
import MultiFuncOnClickButton from './MultiFuncOnClickButton';

function App() { 
  return (
    <div>
      <br/>
      <br/>
      <br/>
    <MultiFuncOnClickButton></MultiFuncOnClickButton>      
    </div>
  );
}
export default App;

OUTPUT

On the Button Click, two functions DispMsg1, DispMsg2 are executed.