reactjs - 反应：当我点击父级时，音频元素只播放一次

Question

作为 React 组件的一部分，在渲染函数中，我将音频元素作为另一个元素的子元素。

<td onClick={this.handlePick}>

</td>
<td onClick={this.handlePick}>
</td>
 ...

组件中的构造函数和handlePick分别是：

 constructor(props){
    ...
    this.state={
            url: '' 
          }
     }

handlePick(e){
    const option=e.target.id;
    const mySound=sounds[option] // sounds is array of url pointing to diferent sounds
    this.setState(()=>{
            return {
                url: mySound
                }
            }
        )

    const audio= new Audio(mySound)
    audio.play()
   }

单击任何 td 元素（音频元素的父级）时效果很好，但如果我再次单击它就不起作用。我需要单击另一个 td 元素才能单击前一个元素（仅一次）。

标签： reactjsaudiohtml5-audio