如何使 ReactJS 按钮看起来像在 keyPress 上按下？答案

【问题标题】：How do I make ReactJS button look like pressed on keyPress?如何使 ReactJS 按钮看起来像在 keyPress 上按下？
【发布时间】：2020-06-03 17:19:49
【问题描述】：

我用 ReactJS 创建了一个 Drum Machine，但是当我按下相应的键时，我找不到让按钮看起来像被点击的方法。我在网站上发现了以下问题，但我无法让 refs 与我的代码一起工作，我不知道为什么：

我还读到现在不建议使用字符串引用，所以我真的不知道如何处理这个问题。

【问题讨论】：

【解决方案1】：

虽然不鼓励使用字符串引用。您仍然可以通过 React.createRef 来使用 refs

你甚至不必使用 refs，你可以给它们所有唯一的 id，因为它们无论如何都是唯一的，然后每当按下一个键时，你可以检查做一个 if q is pressed, add pressed class to the q button

在 JS 中对 HTML 元素添加和删除类可以通过以下方式实现：

您可以使用element.classList.add("pressed") 来实现这一点。和element.classList.remove("pressed")

【讨论】：

您好，感谢您的回答。我没有想过改变用它所拥有的唯一ID来识别按钮的类。这听起来是个好主意，我会试试的。但是一旦我在按下某个键时定位元素，我该如何向它添加一个类？然后我可以用 onKeyUp 删除这个类吗？
是的，你可以。您可以使用classList.add("pressed") 来实现这一点。和classList.remove("pressed") 参考：developer.mozilla.org/en-US/docs/Web/API/Element/classList
非常感谢，成功了！我不得不在短时间内使用 setTimeout 删除课程，瞧！

【解决方案2】：

您可以使用样式将按钮显示为按下/未按下，并从状态管理按下/未按下事件。请参考以下链接。 Neumorphism 是几个月前流行的 UI。

【讨论】：