反应点击键代码未定义

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而不是鼠标点击，无论如何都被认为是过时的。
从键盘事件.键代码 MDN：

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

Answer 2

react 的onClick道具调度没有keyCode属性React.ClickEvent。由于它是鼠标事件，因此事件对象上存在与键盘相关的属性是不合逻辑的。

键盘相关属性存在于 React.KeyboardEvent 上，由 react 的键盘事件相关道具(如 onChange、onKeyup、onKeyDown 等(调度

https://codesandbox.io/s/kkv9ol6pr7

Answer 3

嗨，

您在这里使用的是 h1 标签，在此标签中无法处理 onClick 函数，请在按钮标签中执行此操作，然后尝试它工作。

并且您需要在onClick中发送一个参数，例如onClick={(e) => this.handleClick(e)}

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

对于特定的键代码，您可以通过以下链接

密钥代码