按下键盘上的特定键触发的 Onclick 功能

Question

是否可以触发附加在 React 中具有特定 keyCode 的按钮上的点击事件？现在我的计算器通过点击按钮来工作。但我的目标是让它同时工作 - 在数字键盘上单击或键入数字。

所有按钮都有点击事件，根据其名称触发功能。带有数字的按钮触发getNumber() 函数，该函数获取按钮名称并将其存储在状态中。然后 state 作为 props 发送到 display 组件并显示。运算符按钮触发operator() 函数，该函数从按钮名称中获取运算符并用于计算。

我试过用谷歌搜索，但我只能在输入<input>element 时触发“发送”按钮上的点击事件，我认为这是完全不同的事情。

那我决定这样试试

    document.addEventListener('keyup',function(e){
      if(e.which == 97){
        document.getElementsByName('1')[0].click();     
      }
    });

我的想法是为我将使用的每个键盘按钮添加带有特定 keyCode 的条件（0-9 和 +-*/. 并输入结果）。 我认为这不是正确的解决方案，但我试了一下，效果不佳。

当我第一次按 NUM1 时一切正常，计算器显示屏上出现“1”，但当我再次按它时，结果不是预期的“11”而是“111”。另一个命中结果不是“111”而是“1111111”等等。发生了一些奇怪的乘法运算。

当我把它放到codesandbox时发生了一件有趣的事情，所以我可以在这里与你分享。按下 NUM1 一次后，显示中会弹出 9 个。我不明白。

链接

https://codesandbox.io/s/youthful-platform-n6lvs?fontsize=14&hidenavigation=1&theme=dark

Answer 1

您有 2 个问题。第一个是几乎总是最终会在某个时候吸引 React 开发人员的东西。 当处于开发模式并使用React.Strict 时，您的App 函数会被调用两次。这是正常行为。这就是为什么你在第一次按下时得到11，你绑定了keydown 事件两次。

React 还会在每次绘制后刷新应用。所以每次你做一个效果，keydown 被绑定更多次。因此，每按一次额外的1s。解决这两个问题的方法是在挂钩中调用您的事件绑定。通常，如果你使用类，你会使用Mount 钩子。由于您正在执行一个功能，您可以通过替换这个来解决：

document.addEventListener('keyup',function(e){
  if(e.which == 97){
    document.getElementsByName('1')[0].click();     
  }
});

有

useEffect(()=>{
    document.addEventListener("keyup", function(e) {
      if (e.which === 97) {
        document.getElementsByName("1")[0].click();
      }
    });
  }, []); //this array should be empty

这基本上是告诉应用程序在第一次绘制时运行一次，然后在每次更新数组中的组件时再次运行。由于数组是空的，这个函数永远不会被再次调用（这是你想要的）。

肯定有更好的方法来实现这种功能，但这可能是在不重构项目其余部分的情况下实现的最干净的方法。

附：不要忘记，许多键盘的每个数字/符号都有 2 个键，并且这些键具有不同的键码 :)

P.P.S 您最终可能想查看e.repeat。这可能对这个项目有用。