Question

是否可以在React中使用特定的keyCode触发附加在按钮上的click事件？现在，我的计算器可以通过单击按钮来使用。但是我的目标是使其同时起作用-单击或在NUM键盘上键入数字。

所有按钮都具有单击事件，可根据其名称触发功能。带数字的按钮触发getNumber()函数，该函数获取按钮名称并将其存储在状态中。然后将状态作为道具发送到显示组件并显示。操作员按钮触发operator()功能，该功能将从按钮名称及其计算中使用操作员。

我已经尝试过搜索它，但是我发现的只是在输入<input>元素时在“发送”按钮上触发点击事件，我认为那是完全不同的事情。

然后我决定尝试这样

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

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

当我第一次按NUM1时，一切正常，计算器显示中将显示“ 1”，但是当我再次按NUM1时，结果不是预期的“ 11”，而是“ 111”。下一个命中结果不是'111'而是'1111111'，依此类推。正在进行一些奇怪的乘法。

当我将其放入codeandbox时发生了有趣的事情，因此我可以在这里与您分享。按下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都会绑定多次。因此，每按一次将另外1个。这两种方法的解决方案都是在挂钩中调用事件绑定。通常，如果您使用的是类，则可以使用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

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

绝对有更好的方法来实现这种功能，但这可能是最干净的实现方式，无需重构项目的其余部分。

P.S。不要忘记，许多键盘的每个数字/符号都有2个键，并且这些键具有不同的键码：）

P.P.S您可能最终希望研究e.repeat。这可能对该项目有用。

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

1 个答案: