我不能在鼓声机上播放声音

Question

我想创造一个简单的反应鼓机器从免费。

我想渲染9个鼓点和播放声音点击。

编辑:我现在可以渲染所有的键，但仍然有问题的功能，播放每个键的声音点击。我现在用的是querySelector，但还是不能用。我不知道怎么修好它。

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

由于在for循环中返回，组件将在循环的第一次迭代期间返回，这意味着函数调用将结束。这就是为什么只呈现一个键的原因。

在React.js中，我们通常做array.map()而不是for循环。类似于：

​

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 id="drum-pad-grid">
      {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")
);

#drum-pad-grid {
  max-width: 300px;
  display: grid;
  grid-template-columns: auto auto auto;
}

.drum-pad {
  cursor: pointer;
  text-align: center;
  margin: 5px;
  padding: 10px;
  background-color: gainsboro
}

.drum-pad:active {
  background-color: gray;
}

<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>

​