javascript - 更改元素的内部文本是否会干扰其子元素？（音频元素的问题）

Question

我有这个 Track 组件，我希望能够从中播放预览音频。

const Track = props => {

  const handlePreview = e => {  
    if (!props.track.preview) {
        e.target.innerText = 'No preview available';
        return;
    }
    e.target.children[0].paused 
    ?   e.target.children[0].play()
    : e.target.children[0].pause();         
}

return (
  <div className='preview' onClick={handlePreview}>
    Preview
    <audio src={props.track.preview}>Audio not supported</audio>
  </div>
)

我希望能够根据预览是否正在播放，在“预览”和“点击暂停”之间切换 div 的内部文本。出于某种原因，如果我添加代码来执行此操作，播放和暂停方法将停止工作。我尝试使用 ref 而不是“e.target.children[0]”，但它也不能正常工作（我第一次点击时，什么都没有发生，但在那之后，每次点击它都会播放和暂停）。我说不出有什么问题。帮助？

标签： javascriptdom-events