如何放置无需将按钮放在焦点上即可使用的按键处理程序?

Question

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

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

内容只是为了检查它是否有效。它不起作用，我花了一些时间才注意到它仅在按钮(我之前调用处理程序的位置(聚焦(单击它之后(时才有效。如何使我的处理程序在没有任何按钮对焦的情况下工作？我希望在按任何键时调用它。

这是我的应用程序：https://codesandbox.io/s/github/AldanaBRZ/javascript-calculator?file=/src/App.js

Answer 1

此代码允许您捕获按下的任何键：

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

Answer 2

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