在 React 中的按键上应用按钮“活动"样式 [英] 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

推荐答案

这是使用 ref(如文档所述，请勿滥用).

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

对于每个按钮，您都需要一个对 DOM 元素的引用"(erence).当您按下一个键并在您的 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 中的按键上应用按钮“活动"样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！