Event Handling in ReactJS
Any actions triggered at which JavaScript can respond is called Events.
Some JavaScript events:
- Clicking an element
- Submitting a form
- Scrolling a page
- On hovering an element
- Mouse out from an element
Event Handling in ReactJS is very similar to handling events on DOM elements. There are only syntactic differnce.
- React events are named using camelCase.
- Using JSX, you pass a function as the event handler, rather than a string.
Let us understand with an example –
In HTML:
<button onclick=”funcClick()”> Click Here </button>
In React:
//Function Component... <button onClick="{funcClick}> Click Here </button> //Class Component... <button onClick="{this.funcClick}> Click Here </button>
Here, incase of React, you should not have to use function bracket “()” in onClick function name.
Event Handling directly in class component
Let us understand by an example
import React, { Component } from "react"; class Tutorial extends Component{ clickEvent = () => { console.log("Button Cliecked!", this); } render(){ return( <div> <h1>Learn Event Handling in ReactjS</h1> <button onClick={this.clickEvent}>Click Here</button> </div> ); } } export default Tutorial;
index.js
import React from "react"; import ReactDOM from "react-dom"; import Tutorial from './Tutorial'; //Rendering component... ReactDOM.render(<Tutorial />, document.getElementById("root"));
Event Handling inside class constructor
Tutorial.js
import React, { Component } from "react"; class Tutorial extends Component{ constructor(props){ super(props); this.clickEvent = this.clickEvent.bind(this); } clickEvent(){ console.log("Button Cliecked!", this); } render(){ return( <div> <h1>Learn Event Handling in ReactjS</h1> <button onClick={this.clickEvent}>Click Here</button> </div> ); } } export default Tutorial;
index.js
import React from "react"; import ReactDOM from "react-dom"; import Tutorial from './Tutorial'; //Rendering component... ReactDOM.render(<Tutorial />, document.getElementById("root"));
You cannot return false to prevent default behavior in ReactJS. you must call preventDefault explicitly.
For example
In HTML
<a href="#" onclick="console.log('clicked'); return false" > Click Here </a>
In ReactJS
function clickEvent(e){ e.preventDefault(); console.log('Clicked'); } <a href="#" onClick={clickEvent}> Click Here </a>