如何放置一个无需按钮即可使用的 keyPress 处理程序？

Question

我正在做一个 ReactJS 计算器，我希望能够点击键盘上的数字并显示在我的计算器上。我写了以下处理程序：

handleKeyPress = (e) => {
  const element = this.state.keys.find(obj => obj.keyCode === e.keyCode);
  console.log(element);
  console.log(e); }

内容只是为了检查是否有效。它不起作用，我花了一些时间才注意到它只在按钮（我之前调用处理程序的地方）获得焦点时（在我单击它之后）才起作用。我怎样才能让我的处理程序在没有任何按钮处于焦点上的情况下工作？我希望它在我按下任意键时被调用。

Answer 1

假设页面中只有计算器，解决此问题的最简单方法是将 keyPress 的处理程序放在覆盖整个页面的 div 上。但是，您必须重构一些其他代码才能使其正常工作。

Answer 2

此代码可让您捕获您按下的任何键：

document.addEventListener("keydown", function(e){
    var keyPressed = e.key;
    console.log(keyPressed);
})

How do I put a keyPress handler that can be used without having the button on focus?