Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

What is React Events ?

Posted on May 30, 2021December 2, 2021 By christo No Comments on What is React Events ?

React Events work similar to HTML Events based upon user Events

React follows the same event of HTML events like click change mouseover etc

Table of Contents

  • What is the Syntax of React Events ?
  • Why do we use Arrow function instead of Regular function in React ?
  • How to use this binding in React with Reagular function ?
  • How to pass Argument in React Events ?
  • How to pass arguments with Regular function in React Events ?
  • How to send Event object of Event Handler that trigger the method ?

What is the Syntax of React Events ?

React has camelCase Syntax

onClick for HTML onclick simliar syntax we use

React events are written in curly braces

Example:

onClick={name} and in HTML we write onclick=”name(this)”

Example with HTML TAG


<button onClick={name}>click to know name</button>

Example of Event handler in React Component


class Myname extends React.Component {
  name() {
    alert("my name is yashpal");
  }
  render() {
    return (
      <button onClick={this.name}>click to know my name</button>
    );
  }
}

ReactDOM.render(<Myname/>, document.getElementById('root'));

Why do we use Arrow function instead of Regular function in React ?

React has no default binding of this. React has only binding of this to the Component object that has created the method

So in React we prefer Arrow function instead of Regular function to simplified the React Code

How to use this binding in React with Reagular function ?

Regular function this binding in React component can be done with constructor of React component

Example of this binding in Regular function of React Component


class Myname extends React.Component {
  constructor(props) {
    super(props)
    this.name= this.name.bind(this)
  }
  name() {
    alert(this);

  }
  render() {
    return (
      <button onClick={this.name}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Myname  />, document.getElementById('root'));

if we will not bind this with React Component Constructor then it will show undefined

How to pass Argument in React Events ?

Arguments in React Event we can pass through anonymous  Arrow function without having any binding issue

Example


class Myname extends React.Component {
  name= (a) => {
    alert(a);
  }
  render() {
    return (
      <button onClick={() => this.name("my name is yashpal singh")}>click to know my name</button>
    );
  }
}

ReactDOM.render(<Myname />, document.getElementById('root'));

How to pass arguments with Regular function in React Events ?

Arguments in React Events we can pass inj Regular functiuon just through binding

Example


class Myname extends React.Component {
  name(a) {
    alert(a);
  }
  render() {
    return (
      <button onClick={this.name.bind(this, "my name is yashpal singh")}>click to know my name</button>
    );
  }
}

ReactDOM.render(<Myname/>, document.getElementById('root'));



if we ll not use bind() method the name() method will get execute when page will loaded instead of onclick button

How to send Event object of Event Handler that trigger the method ?

React Event handler method has access to React Event that has triggered the React Event handler method

How to send Event object through Arrow function

Manually argument of Event object we have to send to Event handler mathod

Example:


class Myname extends React.Component {
  name= (a, b) => {
    alert(b.type);
  
  }
  render() {
    return (
      <button onClick={(ev) => this.name("my name is yashpal", ev)}>click to know my name</button>
    );
  }
}

ReactDOM.render(<Myname/>, document.getElementById('root'));


Event Object with Regular function to React Event handler method

we don’t need manually to send argument of Event object to the Event handler method of React. Event object of automatically goes to the Event handler method

Example


class Myname  extends React.Component {
  name= (a, b) => {
    alert(b.type);

  }
  render() {
    return (
      <button onClick={this.name.bind(this, "my name is yashpal singh")}>click to know my name</button>
    );
  }
}

ReactDOM.render(<Myname />, document.getElementById('root'));

React.js Tags:coding, Event handle, React Event

Post navigation

Previous Post: What is React Component Lifecycle ?
Next Post: How to use Form tag in React ?

Related Posts

React js directly in HTML React.js
How to use CSS in React ? React.js
What is Props in React ? React.js
JSX React.js
Hook in React React.js
How to use Form tag in React ? React.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech