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

Question

我正在使用react js。我有一个视频列表，并有控制器按钮播放和暂停每个视频。 （视频列表是GridList中材料的组成部分ui），我想这样，如果用户点击视频列表中的视频，则应播放所选视频。我尝试用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 = {＆＃39; vidRef＆＃39; + i}＆＃39; 获取 ref =＆＃34; vidRef1＆＃34; ＆＃39;对于第一个视频和＆＃39; ref =＆＃34; vidRef2＆＃34; ＆＃39;第二个等等。

然后访问ref就像这样 this.refs [＆＃39; vidRef＆＃39; + i]