React Events
React event management is one of the important features of a web application. It enables the user to interact with the web application. React supports all react events available in a web application. React event handling is very similar to DOM(Document Object Model) events with few changes.
A react event is an action that will be triggered as a result of the user (event)action. For example, a mouse click, loading of a web page, window resizes, and other interactions actions are called events(action).
⦁ react events(action) are named as camelCase instead of lowercase.
⦁ With JSX, a function is passed as the event(action) handler instead of a string.
Define an event handler method:
log() { cosole.log("Event is fired"); }
React provides an alternative syntax:
log = () =;> { cosole.log("Event is fired"); }
The target of the event, then adds an argument e in the event handler method. React will send the event(action) target details to the handler method.
log(e) { cosole.log("Event is fired"); console.log(e.target); }
alternative lambda syntax is:
log = (e) => { cosole.log("Event is fired"); console.log(e.target); }
send extra details during an event,:
log(extra, e) { cosole.log("Event is fired"); console.log(e.target); console.log(extra); console.log(this); }
alternative lambda syntax:
log = (extra, e) => { cosole.log("Event is fired"); console.log(e.target); console.log(extra); console.log(this); }
event handler method in the constructor of the component:
constructor(props) { super(props); this.logContent = this.logContent.bind(this); }
event handler method for the specific event:
<div onClick={this.log}> ... </div>
set extra arguments:
<div onClick={this.log.bind(this, extra)}> ... </div>
alternate lambda syntax:
<div onClick={this.log(extra, e)}> ... </div>
Create a Event Component:
Import React library:
import React from 'react';
create a class, MessageWithEvent and call constructor with props:
class MessageWithEvent extends React.Component { constructor(props) { super(props); } }
create an event handler method:
logEventToConsole(e) { console.log(e.target.innerHTML); }
create a render function:
render() { }
create a greeting message:
render() { return ( <div> <p>Hello {this.props.name}!</p> </div> ); }
event handler for click event of the root container(div):
render() { return ( <div onClick={this.logEventToConsole}> <p>Hello {this.props.name}!</p> </div> ); }
update the constructor by binding the event handler:
class MessageWithEvent extends React.Component { constructor(props) { super(props); this.logEventToConsole = this.logEventToConsole.bind(); } }
Finally, export the component:
export default MessageWithEvent;
import React from 'react'; class MessageWithEvent extends React.Component { constructor(props) { super(props); this.logEventToConsole = this.logEventToConsole.bind(); } logEventToConsole(e) { console.log(e.target.innerHTML); } render() { return ( <div onClick={this.logEventToConsole}> <p>Hello {this.props.name}!</p> </div> ); } } export default MessageWithEvent;
open index.js and import MessageWithEvent:
import MessageWithEvent from './components/MessageWithEvent'
MessageWithEvent component:
import React from 'react'; import ReactDOM from 'react-dom'; import MessageWithEvent from './components/MessageWithEvent' ReactDOM.render( <React.StrictMode> <div> <MessageWithEvent name="React" /> <MessageWithEvent name="React developer" /> </div> </React.StrictMode>, document.getElementById('root') );
OUTPUT: