javascript - FCC Drum Machine - 通过测试但 keydown 事件没有为我触发

Question

关于鼓机挑战： https ://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine

我从 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>
  );
}

应用组件

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>
  );
}

Codesandbox 链接：https ://codesandbox.io/s/fcc-drum-kit-dz81w

标签： javascriptreactjs

Answer 1

您需要使用 componentDidMount() 告诉浏览器在页面呈现后侦听 onKeydown 事件

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

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

或者将您的按钮事件更改为onKeydown()事件，小写d