如何播放视频列表中选定的视频？

Question

我正在使用 react js。我有一个视频列表，并且每个视频都有播放和暂停的控制器按钮。 （视频列表是 Material-ui 的 GridList 组件）我想要的是，如果用户单击视频列表中的视频，则应该播放所选视频。我尝试使用 refs 和 play() 方法来做到这一点，但每次，用户无论选择哪个视频，都只是最后一个视频播放。我不明白为什么会这样。

<GridList cols={2} style={styles.gridList} cellheight="auto"
 onChange={this.changeNum}>

  {videoData.map((tile,i) => (
    <GridTile
       key={tile.video} title={tile.vidTitle} style={styles.gridTile}
       actionIcon={<div>
        <IconButton><PlayIcon color="white" onClick={this.playVideo.bind(this,"vidRef")} /></IconButton>
        <IconButton><PauseIcon color="white" onClick={this.pauseVideo.bind(this)} /></IconButton>
        </div>}
      >
        <video ref="vidRef" src={tile.video} type="video/mp4" controls></video>

    </GridTile>
  ))}

playVideo() 方法是：

playVideo(index) {
    this.refs.vidRef.play();
}

当这样的代码按我说的那样工作时。我认为“vidRef”值可能是导致问题的原因，但我不确定。每次点击事件都会播放最后一个视频，因为最后一个视频的 ref 值为“vidRef”。

我怎样才能做到这一点？

例如，我点击了 3.mp4，但播放了最后一个视频 (cut.mp4)。

Answer 1

您可以尝试通过向每个视频添加索引值来为每个视频设置唯一名称，例如，可以通过 ref={'vidRef' + i}' 来获取 ref="vidRef1"' 用于第一个视频，'ref="vidRef2"' 用于第二个视频，依此类推。

然后访问 ref 将是这样的 this.refs['vidRef' + i]