javascript - 在 React 的按键上应用按钮 'Active' 样式

Question

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

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

Answer 1

这是一个完美的用例 ref (如文档所述，请勿滥用它)。

对于每个按钮，您都需要一个指向 DOM 元素的“ref”(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)}
      > ...

我们为每个按钮动态设置一个ref名称(尝试找到一种方法在你的组件中定义一个唯一的ref名称前缀并且只在一个地方定义它)，基于它所代表的字符。一旦我们存储了引用，我们就可以根据需要在 handleKeyPress 方法中访问它们，如下所示:

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(...) 的调用:

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

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

因此您的handleKeyPress 方法应该如下所示:

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();
   }
};

希望对您有所帮助!

问候， 最大。