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

Event Handling In React.Js






Example




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'));




Picture showing the output of event handling in react.js

Click to Enlarge


Passing Parameter In The Event Handler




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'));





Output


Picture showing the output of passing paramters in the event handler

Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Friday, August 6, 2021

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250