在React的按键上应用按钮'Active'样式 [英] Apply button 'Active' styles on keypress in React

问题描述

我在React/Redux中有一个鼓应用程序，该应用程序具有完整的功能，但是我希望能够在进行相应的按键操作时应用活动的按钮样式，就像我实际单击按钮时一样.就目前而言，单击按钮会进行过渡，但是键入相应的键只会播放音频文件，而实际上并没有链接到按钮.有没有办法在按键时将相应的按钮标记为活动状态?

I have a drum app in React/Redux that's fully functional as it stands, but I want to be able to apply the active button style when the corresponding keypress is made just like it does when I physically click the button. As it stands, clicking the button does a transition but typing the corresponding key just plays the audio file, and isn't really linked to the button. Is there a way to mark the corresponding button active on keypress?

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

Heres my CodeSandbox: https://codesandbox.io/s/k29r3928z7

推荐答案

这是使用参考(如文档所述，请勿滥用其用法).

This is a perfect use case to use ref (as the documentation says, do not abuse its use).

对于每个按钮，您需要对DOM元素进行引用"(引用).当您按下某个键并在json中找到其代码时，您将访问该按钮的相应引用，并触发"focus"方法，以指示UI以某种方式按下了该按钮.

For each button, you need a "ref"(erence) to the DOM element. When you press a key and you find its code in your json, you will access the corresponding reference to the button and trigger the "focus" method, to indicate the UI that the button was somehow pressed.

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

Your button definition should look something like this:

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

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

We set a ref name for each button dynamically (try to find a way to define a unique ref name prefix in your component and define it only in one place), based on the char it represents. Once we have the references stored, we access them as needed in the handleKeyPress method like this:

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

I would actually replace the call to this.props.drumHit(...) for:

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

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

The reason for that is because if you change the drumHit method name or signature in the future, you just need to update it in the onClick property of your button properties definition. As a good practice, always try to emulate this kind of events programmatically, instead of replicate the same behavior in different parts of your code.

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

So your handleKeyPress method should look something like this:

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的按键上应用按钮'Active'样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！