React component Lifecycle method componentDidMount() is the best appropriate place where you can place your react event. If you aren’t sure what is component lifecycle method then you don’t need to bother, we’ll discuss the component lifecycle method in these tutorials. React comes with a native event system that is completely synchronized with native event systems of the browser.
With that being said, it is imperative to know the React synthetic event system is cross-browser compatible, therefore, it works pretty much the same in all major web browsers such as Google Chrome, Mozilla, and Firefox. Even if native events work differently across web browsers.
Event is triggered when a user interacts with an application or perform a certain task just like in our code example when a user enters a website name in the form input tag, then the even handler changeWebsiteName is triggered.
Some of the most commonly used event handlers in react are onChange, onClick, onUserInput, and OnWindowReisze. The importance of event handlers can be gauged from a fact that without incorporating event handlers in your code, you cannot add interactivity to your application.
We can write a code for native browser events on DOM elements. For instance, in order to display a text on the browser console when the div tag is clicked, we can write the code for this in the following manner:
<div onclick="console.log(this.textContent);"> You might not need to React... </div>
On the flip side, we can write an event in react.js with an aid of the following code:
function ActionLink() {
function handleEvent(e) {
e.preventDefault();
console.log('You’ve just clicked a link');
}
return (
<a href="#" onClick={handleEvent}>
Click here
</a>
);
}
The differences between the Javascript and react.js event are as follows:
- ReactJS uses a camelcase naming convention for an event handler such as onChange, onClick, or onKeyPress. On the flip side, Vanilla Javascript doesn’t strictly follow any specific naming convention.
- ReactJS event doesn’t use strings just like Vanilla JavaScript, but instead it uses JavaScript directly.
An onClick event handler which is most widely used in the react.js is synchronized with a synthetic event. React synthetic events are wrapped up inside the browser’s native element. We can easily access native event object leveraging the nativeEvent attribute on any synthetic event.
The event onChange() doesn’t always mean a change, but it is often triggered when the user performs any change. From a technical standpoint, onChange event is always invoked for any input, any time or anywhere.
Some of its examples are as follows:
- When we use an onChange event handler on an input form tag then this event is automatically triggered when the user typed anything in an input text area.
- Whenever we select or check the box, the React onChange() event handler is automatically triggered.
- When we select a specific option from the dropdown menu list then React will fire onChange() event.
Here are some of the most widely used Events in React coding:
- Keyboard Events: onKeyUp, onKeyDown, or onKeyPress.
- Focus events: onFocus, onBlur.
- Form Events: onChange, onInput, onSubmit
- Touch Events: onTouchStart(), onTouchEnd(), onTouchMove(), onTouchCancel().
- Mouse Events: onClick, onDrag, onMouseOver, onMouseOut.
Aside from these aforementioned events, there are some more events in React such as UI events, wheel events, composition events, image events, and media events.
Now let’s write a code to handle the same event in React:
Code Example:
In the following code example, we’ve used only one component and have used only one event onChange. This event will get triggered automatically when the changeText function is called. Eventually, the website name is returned.
This is how the code looks like:
import React, { Component } from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
websiteName: "",
UserName: "",
learningGoals: "",
techincalBackground: "",
};
}
changeWebsiteName(event) {
this.setState({
websiteName: event.target.value,
});
}
changeUserName = (e) => {
this.setState({
UserName: e.target.value,
});
};
changeLearningGoals = (e) => {
this.setState({
learningGoals: e.target.value,
});
};
changeTechnicalBackground = (e) => {
this.setState({
techincalBackground: e.target.value,
});
};
render() {
return (
<div>
<h2>Example of Event Handling in ReactJS </h2>
<label htmlFor="name">Enter your website name: </label>
<input
type="text"
id="websiteName"
onChange={this.changeWebsiteName.bind(this)}
/>
<h4>You entered: {this.state.websiteName}</h4>
<label htmlFor="username">Enter your User Name: </label>
<input
type="text"
id="UserName"
onChange={this.changeUserName.bind(this)}
/>
<h4>You entered: {this.state.UserName}</h4>
<label htmlFor="LearningGoals">Enter your Learning Goals: </label>
<input
type="text"
id="LearningGoals"
onChange={this.changeLearningGoals.bind(this)}
/>
<h4>You entered: {this.state.learningGoals}</h4>
<label htmlFor="technicalBackgroun">
Enter your Technical Background:{" "}
</label>
<input
type="text"
id="Technical Background"
onChange={this.changeTechnicalBackground.bind(this)}
/>
<h4>You entered: {this.state.techincalBackground}</h4>
</div>
);
}
}
export default App;
Output:
Also
