如何 Link React JS 中某个键盘键的功能

How to Link A certain Keyboard Key to a function in React JS

我制作了一个简单的应用程序,您可以查看它 here 但现在的问题是,当用户登录并创建 post 时,有一个按钮可以添加post 现在我想要“Enter”键来执行与我的按钮代码相同的任务

<Button variant="contained" color="secondary" onClick = {updateList}>Add item</Button>

现在我想将相同的 updateList 功能绑定到 Enter 键,请教我如何做???

按钮来自Material-ui

目前,当我点击回车键时,它会重新加载页面,我也想阻止这种情况发生

此外,谁能告诉我是否可以像 ctrl + Z 这样进行多键笔画输入?

因为您的寻呼机正在重新加载,我猜您正在使用 HTML 表单标签。为防止页面重新加载,您需要在提交后防止默认事件行为。

<form onSubmit={(event) => {event.preventDefault() /* this stops reloading the page */ }} ></form>

为了能够在回车时提交,您应该在表单标签旁边添加一个按钮并向其添加类型“提交”。

<form onSubmit={(event) => {event.preventDefault() /* this stops reloading the page */ }} >
  <button type={"submit"}/>
</form>

应该可以了。

如果你想将函数绑定到某个键上,你可以通过名为 onKeyDown 或 onKeyPress 的事件侦听器来实现:

handleKeyPress = (event) => {
  if(event.key === 'Enter'){
    console.log('enter press here! ')
  }
}
function App(){
     return(
         <div>
           <input type="text" id="one" onKeyPress={this.handleKeyPress} />
        </div>
     );
}