在 React 中的按键上应用按钮“活动”样式

我在 React/Redux 中有一个鼓应用程序，它的功能齐全，但我希望能够在相应的按键按下时应用活动按钮样式，就像我物理单击按钮时一样。就目前情况而言，单击按钮会进行转换，但键入相应的键只会播放音频文件，而不会真正链接到按钮。有没有办法在按键时将相应的按钮标记为活动状态？

这是我的 CodeSandbox：https://codesandbox.io/s/k29r3928z7 https://codesandbox.io/s/k29r3928z7

这是一个完美的用例ref https://reactjs.org/docs/refs-and-the-dom.html（正如文档所说，不要滥用它的使用）。

对于每个按钮，您都需要一个 DOM 元素的“引用”（erence）。当您按下某个键并在 json 中找到其代码时，您将访问该按钮的相应引用并触发“焦点”方法，以指示 UI 以某种方式按下该按钮。

您的按钮定义应如下所示：

{drumObj.map(x => (
      <button
        className="drum-pad"
        ref={"drumButton" + x.trigger}
        key={x.id}
        id={x.id}
        onClick={() => drumHit(x.url, x.id)}
      > ...

我们根据每个按钮所代表的字符动态地为每个按钮设置一个引用名称（尝试找到一种方法在组件中定义唯一的引用名称前缀并仅在一个位置定义它）。一旦我们存储了引用，我们就可以根据需要在处理按键像这样的方法：

handleKeyPress = event => {
   const drumKey = drumObj.find(obj => obj.keyCode === event.keyCode);

   if (drumKey) {
     this.refs["drumButton" + drumKey.trigger].focus();
     this.props.drumHit(drumKey.url, drumKey.id);
   }
};

我实际上会替换调用this.props.drumHit(...) for:

this.refs["drumButton" + drumKey.trigger].click();

这样做的原因是因为如果你改变drumHit将来，您只需在按钮属性定义的 onClick 属性中更新它的方法名称或签名即可。作为一种好的做法，请始终尝试以编程方式模拟此类事件，而不是在代码的不同部分中复制相同的行为。

So your 处理按键方法应该看起来像这样：

handleKeyPress = event => {
   const drumKey = drumObj.find(obj => obj.keyCode === event.keyCode);

   if (drumKey) {
     this.refs["drumButton" + drumKey.trigger].click();
     this.refs["drumButton" + drumKey.trigger].focus();
   }
};

我希望它有帮助！

问候， 最大限度。