Javascript 使用React键向下播放音频

我正在为FreeCodeCamp制作一个鼓机，但我很难在单击特定键时播放音频。 我最近的尝试可以在handleKeyDown中看到。 函数正在接收事件，我可以渲染哪个键被击中，但不确定如何播放src。 我不知道如何使if语句工作，也不知道if语句中的代码如何工作。 我删除了一些我认为与问题无关的代码。 我应该如何处理这个问题？非常感谢

    const sounds = [
  {
    key: 'Q',
    keyCode: 81,
    id: 'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  },
  {
    key: 'W',
    keyCode: 87,
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  }
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.audio = React.createRef()
  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeydown);
  }

  componenetWillUnmount() {
    document.removeEventListener('keydown', this.handleKeydown);
  }
  
  handleKeydown = (e) => {
    if (e.keyCode === this.props.keyCode) {
      
      const audio = document.getElementById(this.props.key);
      audio.currentTime = 0;
      audio.play();
    }
  }
  


  render() {
  return (
    <div id="drum-machine">
      <div id="drumpad">
      {sounds.map(i => (
            <button
              className="drum-pad"
              id={i.key}
              key={i.key}
              onClick={this.handleClick}
              value={i.key}
            >{i.key}
            <audio 
            className="clip" 
            id={i.key}
            src={i.url}
            ref={this.audio}
            /></button>
          ))}
      </div>
    </div>
  );
}
}

const sounds=[
{
键：“Q”，
密码：81，
id:‘加热器-1’，
网址：'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
},
{
键：“W”，
密码：87，
id:‘加热器-2’，
网址：'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
}
];
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.audio=React.createRef（）
}
componentDidMount（）{
document.addEventListener（'keydown'，this.handleKeydown）；
}
componenetWillUnmount（）{
document.removeEventListener（'keydown'，this.handleKeydown）；
}
handleKeydown=（e）=>{
if（e.keyCode==this.props.keyCode）{
const audio=document.getElementById（this.props.key）；
audio.currentTime=0；
音频播放（）；
}
}
render（）{
返回(
{sounds.map（i=>(
{i.key}
))}
);
}
}

//file for export, comm.js
export const AudioPlay = (file) => {
  new Audio(`/static/sounds/${file}`).play();    //under folder public
};

//file import
import {AudioPlay} from './comm';

//in your event function
AudioPlay('stockin-ok.mp3');