javascript - 无法触发 Drum Machine 项目中的元素 (React)

Question

我的应用程序工作正常，但弹出错误，我无法解决它。这是一个项目，我必须传递这个错误。错误如下:

错误:“当我按下与每个 .drum-pad 关联的触发键时，应触发其子元素中包含的音频剪辑(例如，按 Q 键应触发包含字符串“Q”的鼓垫，按 W 键应触发包含字符串“W”等的鼓垫。”

代码:

import React from "react";
import ReactDom from "react-dom";

const sounds = [
  {
    idnum: "1",
    id: "Q",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
  },
  {
    idnum: "2",
    id: "W",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
  },
  {
    idnum: "3",
    id: "E",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
  },
  {
    idnum: "4",
    id: "A",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",
  },
  {
    idnum: "5",
    id: "S",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
  },
  {
    idnum: "6",
    id: "D",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
  },
  {
    idnum: "7",
    id: "Z",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",
  },
  {
    idnum: "8",
    id: "X",
    src: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
  },
  {
    idnum: "9",
    id: "C",
    src: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
  },
];

class SoundButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      audioSource: "not clicked",
    };
    this.soundOn = this.soundOn.bind(this);
  }

  buttonRef = React.createRef();
  audioRef = React.createRef();

  buttonRef(e) {
    e.click();
  }

  soundOn() {
    console.log(this.audioRef.current);
    this.audioRef.current.play();
  }

  render() {
    const { info } = this.props;

    return (
      <button
        ref={this.buttonRef}
        className="drum-pad"
        id={info["idnum"]}
        onClick={this.soundOn}
      >
        {info["id"]}
        <audio
          ref={this.audioRef}
          src={info.src}
          className="clip"
          id={info.id}
          type="audio/mp3"
        ></audio>
      </button>
    );
  }
}
class Button extends React.Component {
  // any other logic

  render() {
    return sounds.map((info) => <SoundButton info={info} key={info.id} />);
  }
}
export default Button;

我的应用程序工作正常，但我需要您的帮助来解决该错误。请帮我解决一下。

谢谢!

Answer 1

请看一下code .

如果您要处理键盘事件，您应该监听它 window.addEventListener("keyup", this.onKeyUp); 并根据需要处理事件，例如从事件中获取按键代码并使用它们来演奏鼓。