React js is one of the most popular JavaScript frameworks today. There are a lot of companies whose websites are built on React due to the framework’s unique features. React UI comprises several components. There are a lot of tasks that users can perform on a React user interface. Each component has different HTML elements where the user can click, hover or trigger any form of event.
Event Handlers: Events are the signals sent when there is a change in the UI. Users may click hover drag the mouse or press any key to perform these events. To respond to these changes users can write event handler code. You need to keep these 2 points in mind while working with React events.
- React events are named in the format of camelCase (onChange instead of onchange).
- React event handlers are placed inside curly braces (onChange={handleSubmit} instead of onChange=”handleSubmit”).
Approach: Let us create a React project and then we will create a event handler. Users can interact and trigger an event through this. After seeing the response in UI we will create our own parameters. This will help you to understand the underlying logic of event handlers and passing parameters through it.
Creating React Project:
Step 1: To create a react app you need to install react modules through npx command. “Npx” is used instead of “npm” because you will be needing this command in your app’s lifecycle only once.
npx create-react-app project_name
Step 2: After creating your react project move into the folder to perform different operations.
cd project_name
Project Structure: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new components user makes or the code changes we will be performing will be done in the source folder.
Example 1: In this example, we will create an event handler that sends a Welcome message i.e. Alert whenever you click the button.
Javascript
// App.jsimport React from "react";class App extends React.Component { call() { alert("Welcome to Geeks for Geeeks!"); } render() { return ( <button onClick={this.call}>Click the button!</button> ); }}export default App; |
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open your browser. It will by default open a tab with localhost running (http://localhost:3000/) and you can see the output shown in the image. Click on the button to see the welcome message.
Example 2: In this example, we will use the arrow function to create a new function that calls the function call with the right parameter. Passing the event object of react as the second argument. If you want to pass a parameter to the click event handler you need to make use of the arrow function or bind the function. If you pass the argument directly the onClick function would be called automatically even before pressing the button.
Javascript
// App.jsimport React from "react";class App extends React.Component { call(message, event) { alert(message); } render() { return ( //Creating a arrow function <button onClick={(event) => this.call("Your message", event)}> Click the button! </button> ); }}export default App; |
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open your browser. It will by default open a tab with localhost running (http://localhost:3000/) and you can see the output shown in the image. Click on the button to see the welcome message.
Example 3: In this example, we will use Bind Method that is also used to pass the parameters in functions of class-based components.
Javascript
// App.jsimport React from "react";class App extends React.Component { call(message) { alert(message); } render() { return ( <button onClick={this.call.bind(this, "Your message")}> Click the button! </button> ); }}export default App; |
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open your browser. It will by default open a tab with localhost running (http://localhost:3000/) and you can see the output shown in the image. Click on the button to see the welcome message.
