我在 React/Redux 中有一个功能齐全的鼓应用程序，但我希望能够在相应的按键按下时应用活动按钮样式，就像我物理单击按钮时一样。就目前而言，单击按钮会进行转换，但键入相应的键只会播放音频文件，并没有真正链接到按钮。有没有办法在按键时标记相应的按钮处于活动状态？
这是我的 CodeSandbox：https://codesandbox.io/s/k29r3928z7
【问题讨论】：
标签： javascript css reactjs redux react-redux
这是使用ref 的完美用例（如文档所述，请勿滥用）。
对于每个按钮，您需要一个 DOM 元素的“引用”（erence）。当您按下某个键并在 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();
}
};
希望对你有帮助！
问候， 最大。
【讨论】：