Event handling in react class component

It is possible to do event management in react. Event management is important feature in web application to interact with end user. React support all events available in a web application. React allows to create class method which can be bind with html element.

Steps to bind event with react component

1. Define event handler method in component2. Bind event handler method with component3. Call event handler method with DOM event

Define event handler method in component

 1 import React from 'react';
 2 
 3 class Hello extends React.Component {
 4 
 5   // 1. define handler method
 6   buttonClicked() {
 7     console.log('Button clicked in Hello component !!');
 8   }
 9 
 10   render() {
 11     return (
 12       <div>
 13         <button>Click</button>
 14       </div>
 15     );
 16   }
 17 }
 18 export default Hello;

In the above example, a class Hello is created by extending a React.Component class. A handler method define in the component that prints string on console. A render() method returns a single element that include button element. When component render on browser, it adds div element with button in the parent component.

Bind event handler method with component

 1 import React from 'react';
 2 
 3 class Hello extends React.Component {
 4   constructor() {
 5     super();
 6     // 2. bind handler with component
 7     this.buttonClicked = this.buttonClicked.bind(this);
 8   }
 9 
 10   // 1. define handler method
 11   buttonClicked() {
 12     console.log('Button clicked in Hello component !!');
 13   }
 14 
 15   render() {
 16     return (
 17       <div>
 18         <button>Click</button>
 19       </div>
 20     );
 21   }
 22 }
 23 export default Hello;

In the above example, a constructor method added into the component that binds the handler method for this component object, once a handler is bind with this component, it is accessible in the component and bind with html event.

Call event handler method with DOM event

 1 import React from 'react';
 2 
 3 class Hello extends React.Component {
 4   constructor() {
 5     super();
 6     // 2. bind handler with component
 7     this.buttonClicked = this.buttonClicked.bind(this);
 8   }
 9 
 10   // 1. define handler method
 11   buttonClicked() {
 12     console.log('Button clicked in Hello component !!');
 13   }
 14 
 15   render() {
 16     return (
 17       <div>
 18         {/* 3. bind handler method with HTML event */}
 19         <button onClick={this.buttonClicked}>Click</button>
 20       </div>
 21     );
 22   }
 23 }
 24 export default Hello;

In the above example, a registered handler method is bind with html element button onClick event by assigning handler method using interpolation. It will be called when user click on button. It is possible to avoid bind event handler method with component constructor. You can directly binds the handler method to DOM event as shown below.

Event binding with Dom event

 1 import React from 'react';
 2 
 3 class Hello extends React.Component {
 4   // 1. define handler method
 5   buttonClicked() {
 6     console.log('Button clicked in Hello component !!');
 7   }
 8 
 9   render() {
 10     return (
 11       <div>
 12         {/* 2. and 3. bind handler method with HTML event */}
 13         <button onClick={this.buttonClicked.bind(this)}>Click</button>
 14       </div>
 15     );
 16   }
 17 }
 18 export default Hello;

In the above example, a handler method directly binds with element onClick event which is bind with this component, it can be used only when you want to bind this handler method for single element. If you want to bind it with multiple html elements, it is best practice to bind in the constructor method.

Import component in App component

 1 import React from 'react';
 2 import './style.css';
 3 import Hello from './components/hello'; // importing class component
 4 
 5 function App() {
 6   return (
 7     <div className="App">
 8       <h3>React APP component </h3>
 9       {/* adding Hello component app component */}
 10       <Hello />
 11     </div>
 12   );
 13 }
 14 
 15 export default App;

In the above example, a function component is imported using import statement, it imports component which is define with default keyword. A component is imported and added into the parent component as element which will render Hello component in App component.

Related options for your search

Event handling in react

Error handling in angular

File handing in C language

File handling in Python

Event handling in react function component

Error handling in react component

Http error handling from component in angular

JdbcRowSet with event handling in Java

Create component in react

Create class component in react

Adding a Ref to a class component in react