Events are nothing but the happenings that occur due to user intervention in the app. It can be a mouse click, a mouse hover or even a key press.
From the course of plain JavaScript, we have been able to write events and handling them on different activities but here in React, the way is a little different. Since React uses the concept of Virtual DOM, our hardcoded DOM is seldom utilized while making any changes either to the state or to some other data.
There are two major differences that we need to keep in mind while writing React events:
For Ex:
In HTML we used to write-
In React we’ll write-
A simple event can be created for a mouse click as follows:
class First extends Component {
clickMe = () => {
console.log(“Button Clicked”);
}
render(){
return(
Hi There!
);
}
}
export default First;
Here in this code:
An Event Handler is nothing but a method defined in the component itself, just to execute the task that we wanted to, on certain event. In the above example, clickMe() was the event handler.
class Msg extends Component {
warn() {
alert(this);
}
render() {
return (
);
}
}
export default Msg;
This is another simple example of how an event handler is designed. However, if we want to access the value of this here in the event handler, we’ll find Undefined. This is because of the different accessibility of this in React. It’s not that similar to plain JavaScript.
However, if we want to access this in an event handler, we’ll have to design the handler in an arrow function.
Consider the code below:
class Msg extends Component {
warn = () => {
alert(this);
}
render() {
return (
);
}
}
export default Msg;
class First extends Component {
constructor (props) {
super (props);
this.state = {
name: "Shashi",
designation: "Faculty",
qlf: this.props.attr
}
}
clickMe = () => {
this.setState({name: "Ravi", qlf: "MA"});
}
render(){
return(
Hi! {this.state.name}
You are a {this.state.designation}
You have qualified {this.state.qlf}
);
}
}
export default First;
Here in this code:
setState();
.name
and qlf
are being changed here keeping designation intact.this.clickMe
statement.The output of this code is:
Like any other function in JavaScript, we can pass arguments to event handlers as well.
We have two following ways to do this.
Using an anonymous arrow function:
class Msg extends Component {
warn = (a) => {
alert(a);
}
render() {
return (
);
}
}
export default Msg;
Using bind() method:
class Msg extends Component {
warn = (a) => {
alert(a);
}
render() {
return (
);
}
}
export default Msg;
In React, event handlers have also access to the events that are actually being handled. For example- click, mouseOver, mouseLeave etc.
Again for this we have the following two ways:
Using an anonymous arrow function: In this way, the event object is sent manually to the event handler. Consider the code:
class Msg extends Component {
warn = (a, b) => {
alert(b.type);
}
render() {
return (
);
}
}
export default Msg;
Using bind() method: In this way, the event object is sent automatically to the event handler since our event is bound with this. Consider the code:
class Msg extends Component {
warn = (a, b) => {
alert(b.type);
}
render() {
return (
);
}
}
export default Msg;