无法在 Drum Machine 项目中触发元素（React）

Question

My app is working fine, but an error is popping up and I am unable to solve it. This is for a project and I have to pass this error. The error is as follows:

Error: "When I press the trigger key associated with each.drum-pad, the audio clip contained in its child element should be triggered (eg pressing the Q key should trigger the drum pad which contains the string "Q", pressing the W key should trigger the drum pad which contains the string "W", etc.)."

Code:

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;

My app is working fine, but I need your help in solving the error. Please help me with it.

Thanks!

Answer 1

Please look at that code .

If you will to handle keyboards event you should listen for it window.addEventListener("keyup", this.onKeyUp); and handle event as you wish, for example get key code from event and use them to play drum.