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'));