Javascript FCC鼓机-通过测试，但按键事件未为我触发

关于鼓机挑战：

我从FCC那里得到了cdn脚本，上面说所有的测试都通过了，但是当我试着按按键运行调用音频剪辑的函数时，什么都没有发生——我是不是遗漏了什么

关键组件

import React from "react";
import { data } from "./sounds";

export default function Key(props) {
  const soundId = props.soundId;

  const play = () => {
    document.getElementById(props.id).play();
    console.log(`'Clicked:' ${props.id}`);
  };

  const displayData = props.displayData;

  const handleClick = () => {
    play();
    displayData(props.id);
  };

  return (
    <div className="buttonContainer" >
      <button id="button" className="drum-pad" onClick={handleClick} onKeyDown={handleClick}>
        <audio
          src={data[soundId].url}
          type="audio/mp3"
          className="clip"
          id={props.id}
        />
        {props.id.toUpperCase()}
      </button>
    </div>
  );
}

从“React”导入React；
从“/sounds”导入{data}；
导出默认功能键（道具）{
const soundId=props.soundId；
常量播放=（）=>{
document.getElementById（props.id.play（）；
log（`Clicked:'${props.id}`）；
};
const displayData=props.displayData；
常量handleClick=（）=>{
play（）；
显示数据（道具id）；
};
返回(
您需要告诉浏览器在页面呈现后使用componentDidMount（）监听onKeydown事件

或者将按钮事件更改为
onKeydown（）
event，小写d

import React, { useState } from "react";
import Key from "./Key";

import "./styles.css";

export default function App() {
  const [displayData, setDisplayData] = useState();

  const handleDisplay = input => {
    setDisplayData(input);
    setTimeout(() => {
      setDisplayData();
    }, 500);
  };

  return (
    <div className="App">
      <div id="drum-machine">
        <p id="display">{displayData}</p>
        <Key id={"Q"} soundId={0} charCode={81} displayData={handleDisplay} />
        <Key id={"W"} soundId={1} charCode={87} displayData={handleDisplay} />
        <Key id={"E"} soundId={2} charCode={69} displayData={handleDisplay} />
        <Key id={"A"} soundId={3} charCode={65} displayData={handleDisplay} />
        <Key id={"S"} soundId={4} charCode={83} displayData={handleDisplay} />
        <Key id={"D"} soundId={5} charCode={68} displayData={handleDisplay} />
        <Key id={"Z"} soundId={6} charCode={90} displayData={handleDisplay} />
        <Key id={"X"} soundId={7} charCode={88} displayData={handleDisplay} />
        <Key id={"C"} soundId={8} charCode={87} displayData={handleDisplay} />
      </div>
    </div>
  );
}

componentDidMount() {
    document.addEventListener("onKeydown", this.handleKeyPress);
  }

  componentWillUnmount() {
    document.removeEventListener("onKeydown", this.handleKeyPress);
  }