错误document.getElementById（...）。play不是函数

Question

此处控制台显示错误信息document.getElementById（...）。play不是函数

import React from 'react';
const musicComponent=(props)=>{
    const style={background:props.color}
    return(
        <div className="musicpad"   style={style} onClick={()=> 
            {document.getElementById("h"+props.index).onplay()}} >
        <audio className="sounds" id={"h"+props.index} 
            src={props.music1}  ></audio>
        </div>)
}

export default musicComponent;

Answer 1

您正在尝试致电.onplay()。改为致电.play()：

function MusicComponent(props) {
  const audio = React.useRef()
  const playFromStart = () => {
    audio.current.currentTime = 0
    audio.current.play()
  }
  return (
    <div onClick={playFromStart}>
      <audio src={props.music1} ref={audio} />
      play
    </div>
  )
}

ReactDOM.render(<MusicComponent music1="https://www.w3schools.com/html/horse.ogg" />,
  document.getElementById('root'))

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