这是使用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)}
      > ...

我们为每个按钮动态设置一个 ref 名称（尝试找到一种方法在您的组件中定义一个唯一的 ref 名称前缀，并且只在一个地方定义它），基于它所代表的字符。一旦我们存储了引用，我们就可以在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();
   }
};

我希望它有帮助！

问候，马克斯。