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: