Handling events in React JS day#6

Hello, guys welcome back today. In the previous article, we see props in react. In this, we going to see about handling events in react. so let’s get started.

1. Introduction to react js
2. Hello world in React JS day#1
3. Components in React JS day#2
4. Add style to components in React JS day#3
5. State in React JS day#4  
6. Props in React day#5
7. Handling events in React JS day#6
8. Accessing DOM elements in React JS day#7
9. Conditional rendering in React JS day#8
10. Adding logic to the game part-1 day#9
11. Adding logic to the game part-2 day#10

Handling events in React JS

Handling events are similar to we handle events in normal Html and JS. But in react we have a small difference in it.

First, we need to create a function to handle the events. Next, attach a function to the event and the function call once the event is happening.

Let’s understand with an example

Let take our register component it has an input box and register button. We need to add an onClick event listener to the register button to listen for the event.

First, create setPlayer function to handle the event, and don’t forget to bind this to our setPlayer function.

Register.js

import React from 'react'; 
import "./Register.css";

//we importing the player component 
import Player from "./Player.js";

class Register extends React.Component
{
  constructor(props)
  {
    super(props);
    //at initial the player name is empty string 
    this.state={player_name:""}
    //binding this to function 
    this.setPlayer=this.setPlayer.bind(this);
  }
  //this will handle the event 
  setPlayer()
  {
    console.log("Hey! I was Clicked");
  }
  
  //return the input box and register button 
  render() {

        return(
     		<div className="register_container">		 						
     		   <input type="text" placeholder="Enter the player name.." className="player_name" value={this.state.player_name}/>
                   <input type="button" value="Register" className="reg_button"/>
     		</div>                        
                <Player player_name={this.state.player_name}/>
     	      );
     	}
 
 }

Now let attach our function to the onClick event.

The syntax to attach event in react is

<input onClick={eventHandler}/>

Note: React use camel case for HTML attributes rather than lowercase.

Register.js

import React from 'react'; 
import "./Register.css";

//we importing the player component 
import Player from "./Player.js";

class Register extends React.Component
{
  constructor(props)
  {
    super(props);
    //at initial the player name is empty string 
    this.state={player_name:""};
    //binding this to function 
    this.setPlayer=this.setPlayer.bind(this);
  }
  //this will handle the event 
  setPlayer()
  {
    console.log("Hey! I was Clicked");
  }
  //return the input box and register button 
  render() {

    return(
     	    <div className="register_container">		 						
               <input type="text" placeholder="Enter the player name.." className="player_name" value= {this.state.player_name}/>
               <input type="button" onClick={this.setPlayer} value="Register" className="reg_button" onClick={this.setPlayer}/>
            </div>
            <Player player_name={this.state.player_name}/>
         );
     }
 }

Now let run the code and click the register button you will get output in as console like below.

Note: You can also use the arrow function to handle the events.

Conclusion

Ok guys that’s enough for today. We learn about handling events in react JS in this article. In the next article, we learn how to access DOM elements in react.

All the best guys for upcoming days keep learning.