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);并根据需要处理事件，例如，从事件中获取键码并使用它们弹鼓。

无法触发Drum Machine项目中的元素（反应）

1 个答案: