In the context of React, “events” refer to interactions or occurrences that happen in a web application, such as a user clicking a button, moving the mouse, typing on a keyboard, or any other action that triggers a response from the application. React is a popular JavaScript library for building user interfaces, and it provides a way to handle and respond to these events within your application.
React allows you to create event handlers, which are functions that get executed when a specific event occurs. These event handlers are associated with elements in your user interface, like buttons, input fields, or any other HTML elements. When an event is triggered, the associated event handler function is called, allowing you to update the UI, perform some action, or modify the application’s state.
For example, you can use React to create a button element and define an event handler that changes the text on the button when it’s clicked. Here’s a simplified example:
import React, { useState } from 'react';
function App() {
const [buttonText, setButtonText] = useState('Click me');
const handleClick = () => {
setButtonText('Clicked!');
};
return (
<div>
<button onClick={handleClick}>{buttonText}</button>
</div>
);
}
export default App;
In this code, the onClick event is associated with the button element, and when the button is clicked, the handleClick function is executed, changing the button’s text to “Clicked!”.
React provides a convenient way to manage and respond to various events in your application, making it easier to create dynamic and interactive user interfaces.
React Events work similar to HTML Events based upon user Events
React follows the same event of HTML events like click change mouseover etc
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'));