我无法在鼓机中单击时播放声音

Question

I want to create a simple react drum machine from freecodecamp.

I want to render 9 drumpads and play sound on click.

Edit: I can now render all keys but still have problems with the function for playing the sounds for each key on click. I used querySelector now but it still doesn't work. I have no idea how to fix it.

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

 

function DrumPad() {
  const pads = [
    {
      key: "Q",
      id: "Heat-1",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
    },
    {
      key: "W",
      id: "Heat-2",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
    },
    {
      key: "E",
      id: "Heat-3",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
    },
    {
      key: "A",
      id: "Heat-4",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
    },
    {
      key: "S",
      id: "Clap",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
    },
    {
      key: "D",
      id: "Open-HH",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
    },
    {
      key: "Z",
      id: "Kick-n-Hat",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
    },
    {
      key: "X",
      id: "Kick",
      url: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
    },
    {
      key: "C",
      id: "Closed-HH",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
    }
  ];

  return (
    <>
      {pads.map((pad) => (
        <div
          key={pad.id}
          className="drum-pad"
          id={pad.id}
          onclick={function () {
            const sound = document.querySelector("audio[id=" + pad.key + "]");
            sound.play();
          }}
        >
          {pad.key}
          <audio id={pad.key} src={pad.url} />
        </div>
      ))}
    </>
  );
}

const App = () => {
  return (
    <div>
      <div id="drum-machine">
        <DrumPad />
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

Since you are returning within a for loop, the component will return during the first iteration of the loop which means the function call will end. This is why only one key is rendered.

In React.js we usually do array.map() instead of for loops. Something like:

 function DrumPad() { const pads = [ { key: "Q", id: "Heat-1", url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" }, { key: "W", id: "Heat-2", url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" }, { key: "E", id: "Heat-3", url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" }, { key: "A", id: "Heat-4", url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" }, { key: "S", id: "Clap", url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3" }, { key: "D", id: "Open-HH", url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3" }, { key: "Z", id: "Kick-n-Hat", url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" }, { key: "X", id: "Kick", url: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3" }, { key: "C", id: "Closed-HH", url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3" } ]; return ( <div> {pads.map((pad) => ( <div key={pad.id} className="drum-pad" id={pad.id} onClick={() => { const audio = new Audio(pad.url); audio.play(); }} > {pad.key} </div> ))} </div> ); }; ReactDOM.render( <DrumPad />, document.getElementById("root") );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>