Question

我正在研究freeCodeCamp鼓机项目。当用户单击鼓垫时，我想播放声音。由于audio元素不是真正的DOM元素，而是它的副本，因此要引用它，我需要使用ref（或者至少我认为这就是原因）。

我按照React doc的说明在功能组件中使用ref，并且我有一个方法handleClick，当您单击我想调用audio.play()的“鼓垫”时会触发该方法。但是，当我单击其中一个鼓垫时，应用程序崩溃，并显示错误“ audio.play不是功能”。裁判有问题吗？任何建议表示赞赏。

子组件DrumPad.js：

const DrumPad = ({ id, letter, src }) => {

  let audio = React.createRef(); // <--

  const handleClick = () => { // <--
    audio.play();
  }

  return (
    <div
      className="drum-pad"
      id={id}
      onClick={handleClick}
    >
      <p>{letter}</p>
      <audio
        ref={audio} // <--
        id={letter}
        src={src}
      >
      </audio>
    </div>
  );
}

父App.js：

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  // etc.
];

const App = () => {

  return (
    <div className="drum-machine">
      <div className="drum-pads">
        {sounds.map(sound => (
          <DrumPad
            id={sound.id}
            letter={sound.letter}
            src={sound.src}
          />
        ))}
      </div>
    </div>
  );
}

Answer 1

DOM节点实际上存储在current键下。

这应该可以解决您的问题：

const handleClick = () => { 
    audio.current.play();
}

React docs about createRef

不是使用ref

1 个答案: