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

Question

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

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

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

按钮来自Material-ui

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

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

Answer 1

因为您的寻呼机正在重新加载，我猜您正在使用 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>

应该可以了。

Answer 2

如果你想将函数绑定到某个键上，你可以通过名为 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>
     );
}

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

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

reactjs

material-ui

event-handling

web-development-server