Question

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

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

Answer 1

这是使用ref的完美用例（如文档所述，请勿滥用其使用）。

对于每个按钮，您需要对DOM元素进行“引用”（引用）。当您按下一个键并在json中找到其代码时，您将访问该按钮的相应引用并触发“ focus”方法，以指示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 方法中访问它们，如下所示：

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

希望对您有帮助！

关于，最多

在React的按键上应用按钮``活动''样式

1 个答案: