ビデオリストから選択したビデオを再生するには？

Question

私はreact jsで作業しています。私はビデオリストを持っているし、すべてのビデオの再生と一時停止のコントローラボタンがあります。 （ビデオリストは、素材のどのコンポーネントであるかを示すグリッドリストです）、私が望むのは、ユーザーがビデオリストからビデオをクリックすると、選択したビデオが再生されるはずです。私は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"値が問題の原因になると思いますが、私は確信が持てません。すべてのクリックイベントは、最後の動画の参照値が「vidRef」であるため、最後の動画を再生します。

どうすればこのようにすることができますか？

たとえば、私は3.mp4をクリックしましたが、最後のビデオ（cut.mp4）が再生されました。

Answer 1

次の例のように、それは= {「vidRef」+ I}」が参照を取得する参照することができるよう、それらのインデックス値を追加することにより、各ビデオのためにREFに一意の名前を設定してみてください= "vidRef1" '、最初のビデオでは' ref = "vidRef2" "などです。

その後refにアクセスするには、このthis.refsようなものになるだろう[ 'vidRef' +は、i]は