Let us create a React project and then we will create a UI that takes input from users. Users can interact with the UI and press Enter Key to trigger an event through this.
We will be creating an input field that takes the message as input. In the input, we have added an on KeyDown function which will get activated whenever the user clicks and types something in the input. It will not do anything since a condition is added. The condition is that for every keystroke it will check if the key is entered or not. If the user presses enter then the code inside the condition will run. On the press of entering, the input text will be saved inside the state. After that, a call back function is called which will trigger an alert function greeting the user with the message. An alert function is added. So, input is created that sends a Welcome message whenever Enter is pressed by the user.
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.
Project_Structure
Example:
App.js
import React, { Component } from "react";class App extends Component { state = { message: "" }; render() { return ( <div> <p>Enter Your Message and Press Enter:</p> <input onKeyDown={(e) => { if (e.key === "Enter") { this.setState({ message: e.target.value }, () => { alert(this.state.message); }); } }} type="text" /> </div> ); }}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. Enter your message and press ENTER to see the welcome message.
Detecting Enter Key
