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

我和react js一起工作。我有一个视频列表和控制器按钮，可以播放和暂停每一个视频。（视频列表是材质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>
  ))}

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

我怎样才能做到这一点

例如，我单击了3.mp4，但播放了最后一个视频（cut.mp4）

---

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

---

那么访问ref应该是这样的this.refs['vidRef'+i]

谢谢它的工作。实际上，我试图设置唯一值，但无法使用此值。像这样的refs。refs['vidRef'+I]：）再次感谢。。

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