Question

我知道使用keypress或keyDown可以检查按下了哪个键，但是使用onClick却无法这样做。

class App extends React.Component {
  handleClick = e => {
    console.log(e.keyCode);
  };
  render() {
    return <h1 onClick={this.handleClick}>Hello CodeSandbox</h1>;
  }
}

https://codesandbox.io/s/ovwn9z6owz

这是什么问题？

Answer 1

键码是用于KeyboardEvent的，而不是鼠标单击的键，并且仍然被认为已作废。从KeyboardEvent.keyCode MDN：

不再推荐此功能。虽然某些浏览器可能仍然支持它，它可能已经从相关内容中删除了网络标准，可能正在被删除，或者可能只是出于兼容性目的保留。避免使用它，并更新现有的代码（如果可能）；请参阅此底部的兼容性表指导您做出决定的页面。请注意，此功能可能会停止随时工作。

Answer 2

没有onClick属性的react派发React.ClickEvent的{{1}}道具。由于这是鼠标事件，因此事件对象上与键盘相关的属性的存在是不合理的。

与键盘相关的属性存在于keyCode上，这是由react的与键盘事件相关的道具（例如React.KeyboardEvent，onChange，onKeyup等）调度的。

https://codesandbox.io/s/kkv9ol6pr7

Answer 3

您好，您使用的是h1标签，在此标签中无法处理onClick功能，请在Button标签中进行操作，然后尝试使用。

，您需要在onClick内部发送参数，例如onClick={(e) => this.handleClick(e)}

<Button onClick={(e) => this.handleClick(e)}>Hello CodeSandbox</Button>

对于特定的keyCode，请通过以下链接

Key Code

反应onClick键码未定义？

3 个答案: