React Event Handling with Examples

You have to learn React Event handling and event handler if you need to perform events like click, change hover, key press, key down, key up & more in your web application.

In this tutorial, you will learn event handling in react js with examples that will help you easily to implement any types of events in your project. Even you will learn to create & use event handler in functional & class components.

Before learning it, you should have well understanding of the following topics –

React Components

React Render Method

React Props with Example

React state with Example

React Events

The React Events are just like an HTML events but It is defined in camelCase syntax like eventName instead of eventname

As you know that HTML event always defined in lowercase, if you need to use them in react js, then you will have to simply write in camelCase.

This means that if an event contains two words then you must leave the first word as it is in lowercase and only change the first letter of the second word to uppercase.

See this example for your better understanding

Example –

In this example, I have listed here only some most useful react events, click here to get more from the official website

React Even Handler

Event Handler is just like a user defined function that executes while an event fires.

Event Handler is called as a values of react event within curly brackets.

Syntax –

creating a Event handler

function EventHandlerName(){
 // write here your code
}

calling event handler in functional component

<htmlTagName reactEvent= {eventHandlerName} > some text</htmlTagName>

calling event handler in class component

<htmlTagName reactEvent= {this.eventHandlerName} >some text</htmlTagName>

Example –

function welcome(){
 alert("Welcome to CodingStatus");
}

In HTML –

Event handler is called in HTML within single or double quotes like function name with small brackets

<button onClick="welcome()">Click me</button>

in React

Event handler is called in React js within curly brackets like function name without small brackets

call welcome() event handler without this object in function component

<button onClick={welcome}>Click me</button>

call welcome() event handler with this object in class component

<button onClick= {this.welcome}>Click me</button>

Event Handling in React Js

Event Handling in react js works similar to handing events on DOM element. But It has main two differences –

• Event name must be camelCase rather than lowercase
• Event handler name must be called within curly brackets rather

We have already known the above two points in previous steps React Event & Event Handler. So, now you will also have to learn to implement event handling in functional & class component from the next steps

Event Handling in Functional Component

You can easily implement event handling in function component. But you have to follow these important points –

• The event handler may be defined as an arrow function or regular function
• The event handler is always called without this object in place of event value
• Name of event handler must not be similar to class component

Example –

Event handler is defined as a regular function

function developer(){
 function intro(){
  alert("My Name is Noor Khan and I am an Software Engineer");
 }
 return <button onClick ={intro}> click me</button>
}

Also, Event handler is defined as an arrow function

function developer(){
 const intro = () => alert("My Name is Noor Khan and I am an Software Engineer");
 return <button onClick = {intro}>click me </button>
}

Event Handling in Class Component

To implement Event Handling in class component, you will have to follow some important points –

• The event handler might be defined as an arrow function or regular function
• The event handler is always called with this object in place of event value

For your better understanding, You have to see the above points with some examples in the next stes.

Event Handler as a regular function

If you define event handler as a regular function in class component then you will have to bind this keyword using bind() method.

As we know that, this keyword always returns the current object in other languages. but It might return values, the global object or current object according to its places where it is defined in class components.

Example –

In this example, this keyword is used inside the regular function and within JSX.

If you execute this code, this keyword that is defined inside the intro() function will return an undefined value and another this keyword that is defined within JSX will treat as the current object.

class Developer extends React.Component {
 function intro(){
  document.write("Hello", this);
 }
 return <button onClick={this.intro}>Click me</button
}

If you need that this keyword always returns current object, then you will have to bind it inside the constructor method like –

class Developer extends React.Component {
 constructor(props){
 super(props);
 this.intro = this.intro.bind(this);
 }
 function intro(){
  document.write("Hello", this);
 }
 return <button onClick={this.intro}>Click me</button
}

Event Handler as an Arrow Function

If you define an Event Handler as an arrow function then you will not need to bind this keyword. Because this keyword always returns the current object inside the arrow function.

So, the arrow function is more better than regular function for defining event handler.

Example –

class Developer extends React.Component {
 constructor(props){
 const intro = () => document.write("Hello", this);
 return <button onClick={this.intro}>Click me</button
}

More About Handling Event in React

You may need to implement the handling event with event objects, arguments, props & states in your project. So, You should also learn these things so that you can easily handle any type of event.

Here only I have explained some examples with the onClick event. once you learn it, you will be able to handle other events such as onLoad, onFocus, OnSubmit, onKeyPress, onKeyDown & more.

Access props in React Event Handlers

class Developer extends React.Component {

 const = intro = () => document.write("My Name is ", this.props.fullName);

 render(){
  return <button onClick = {this.intro}>click me</button>
 }
}

<Developer fullName = "Noor Khan">click me</Developer>

Access state in React Event Handlers

class Developer extends React.Component {
 state = {
  id: 101,
  name: "Noor Khan",
  profession: "Software Engineer"
 }
 const = intro = () => document.write("My Name is ", this.state.fullName);
 render(){
  return <button onClick = {this.runIntro}>click me</button>
 }
}

Pass Arguments to React Event Handlers

As we know that we pass arguments to the called function with parantheses () not to the defined function such as

 // define intro function
const intro = ( fullName ) => document.write("My Name is ", fullName);

// call intro function
name = "Noor Khan";
intro(name);

As we know that event handler is also defined as a function. so, we also need to called event handler function with parantheses () instead of its name. But

• We have already learned in previous steps that we call an event handler without its parentheses () as a value of an event. This means that we assign only the name of the event handler to the event within curly brackets.

• If you directly call the event handler with parentheses () then React event will not work and the handler will be automatically executed while loads the web page.

Example –

class Developer extends React.Component {
 const intro = () => document.write("My Name is Noor Khan");
 return <button onClick = { this.intro() } >click me</button>
}

Solution –

Don’t worry we have some options to pass arguments to the event handler without parantheses () –

pass argument to the event handler using another event handler

class Developer extends React.Component {
 state = {
  id: 101,
  name: "Noor Khan",
  profession: "Software Engineer"
 }
 const = intro = (fullName) => document.write("My Name is ", fullName);
 const runIntro  = () => { 
  this.intro(this.state.name)
 }
 render(){
  return <button onClick = {this.runIntro}>click me</button>
 }
}

pass arguemnt to the event handler using anonymous function

class Developer extends React.Component {
 state = {
  id: 101,
  name: "Noor Khan",
  profession: "Software Engineer"
 }
 const = intro = (fullName) => document.write("My Name is ", fullName);
 render(){
  return <button onClick = {()=> this.intro(this.state.name) }>click me</button>
 }
}

pass argument to the event handler using bind() method

class Developer extends React.Component {
 state = {
  id: 101,
  name: "Noor Khan",
  profession: "Software Engineer"
 }
 const = intro = (fullName) => document.write("My Name is ", fullName);
 render(){
  return <button onClick = {this.intro.bind(this, this.state.name) }>click me</button>
 }
}

React Event Object

class Developer extends React.Component {

 const = intro = (fullName, e) => {
  document.write("My Name is ", fullName);
  console.log(e);
 }
 render(){
  return <button onClick = {(e)=> this.intro("Noor Khan", e) }>click me</button>
 }
}

Event Handling with Anchor tag

class Developer extends React.Component {
 state = {
  id: 101,
  name: "Noor Khan",
  profession: "Software Engineer"
 }
 function intro(e) {
 e.preventDefault();
 document.write("My Name is Noor Khan");
 }
 
 render(){
  return <button onClick = {this.intro}>click me</button>
 }
}