Articles → REACT.JS → Event Handling In React.Js

Event Handling In React.Js

In this article, we will discuss event handling in react.js.

Example

In this example, we will add a click event on the button. Here is the code

import React, { Component } from 'react';
import ReactDOM from 'react-dom'




class Message extends Component {


    render() {
        return (
            <button onClick={this.TestMessage}>Click Me</button>
        );
    }

    TestMessage() {
        alert("test");
    }

}

ReactDOM.render(<Message />, document.getElementById('root'));

Here is the output

Picture showing the output of event handling in react.js

Click to Enlarge

Passing Parameter In The Event Handler

You can pass the parameter using an arrow function. Here is the code.

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import ChildComponent from './gyan.js';




class ParentComponent extends React.Component {

    clickEvent = inputParam => {
        alert(inputParam);
    };


    render() {
        return (
            <div><button onClick={() => this.clickEvent("karan") }>Click Me</button></div>
        );
    }
}

ReactDOM.render(<ParentComponent />, document.getElementById('root'));

Here, we are passing the string parameter on the onClick event of the button.

Output

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Friday, August 6, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**