Wie spielt man das ausgewählte Video aus der Videoliste?

Question

Ich arbeite mit react js. Ich habe eine Videoliste und es gibt Controller-Tasten, die für jedes Video abspielen und pausieren. (Video-Liste ist die GridList welche Komponente von Material-ui) und ich möchte das, wenn der Benutzer auf ein Video aus der Videoliste klicken, sollte das ausgewählte Video abgespielt werden. Ich versuche das mit Refs und Play() Methode zu tun, aber jedes Mal, wenn der Benutzer ein Video auswählt, wird nur das letzte Video abgespielt. Ich verstehe nicht, warum es so ist.

<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> 
))} 

und die playvideo() -Methode ist:

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

Wenn der Code wie, dass es funktionieren wie gesagt ich. Ich denke, "vidRef" -Wert kann Ursache für das Problem sein, aber ich bin mir nicht sicher. Jedes Klick-Event spielt das letzte Video, weil der Ref-Wert des letzten Videos "vidRef" ist.

Wie kann ich das richtig machen?

Zum Beispiel habe ich 3.mp4 geklickt aber das letzte Video (cut.mp4) gespielt.

Answer 1

Sie können versuchen, eindeutige Namen zu setzen für jedes Video ref von Indexwert zu ihnen hinzufügen, so zum Beispiel es ref = { 'vidRef' + i} sein könnte‘ bekommen ref = "vidRef1" 'für das erste Video und' ref = "vidRef2" 'für die zweite und so weiter.

Dann ref Zugriff auf so etwas wie dieses this.refs wäre [ 'vidRef' + i]