如何在 ReactJS 中获取回车键？

让我们创建一个 React 项目，然后我们将创建一个接受用户输入的 UI。用户可以与 UI 交互并按下 Enter 键来触发事件。

我们将创建一个将消息作为输入的输入字段。在输入中，我们添加了一个 on Keypress函数，只要用户在输入中单击并键入内容，该功能就会被激活。由于添加了条件，它不会做任何事情。条件是每次击键都会检查是否输入了键。如果用户按下回车，则条件内的代码将运行。按下输入时，输入的文本将保存在状态内。之后，调用一个回调函数，该函数将触发一个警告函数，向用户发送消息。增加了警报函数。因此，每当用户按下 Enter 时，就会创建一个输入，它会发送一条欢迎消息。

创建反应项目：

第 1 步：要创建一个反应应用程序，您需要通过 npx 命令安装反应模块。使用“Npx”而不是“npm”，因为您将在应用程序的生命周期中只需要一次此命令。

npx create-react-app project_name

第 2 步：创建您的 react 项目后，移动到该文件夹以执行不同的操作。

cd project_name

项目结构：运行上述步骤中提到的命令后，如果您在编辑器中打开项目，您可以看到类似的项目结构，如下所示。用户制作的新组件或我们将执行的代码更改将在源文件夹中完成。

项目_结构

例子：

App.js

import React, { Component } from "react";
  
class App extends Component {
    state = {
        message: ""
    };
  
    render() {
        return (
            

                
Enter Your Message and Press Enter:
  
                 {
                        if (e.key === "Enter") {
                            this.setState({ message: e.target.value },
                            () => {
                                alert(this.state.message);
                            });
                        }
                    }}
                    type="text"
                />
            
        );
    }
}
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：打开浏览器。默认情况下，它将打开一个运行 localhost ( http://localhost:3000/ ) 的选项卡，您可以看到图像中显示的输出。输入您的消息并按 ENTER 键查看欢迎消息。

检测回车键