如何将列表中的 VideoId 传递给 React Modal Video

Question

我正在尝试在我的 React 应用程序中单击按钮时以模式 window 播放 YouTube 视频。我正在使用 "react-modal-window" 节点模块作为模态。我正在获取一组 youtube 视频 ID，并通过以下方式将 ID 传递给模态，但只有数组中的最后一个 ID 被模态 window 获取。但是，如果我尝试打印视频 ID，则会得到相应的 ID。谁能帮忙解决这个问题？

<tr>
    <th></th>
    {filteredProductVideoId.map(k => 
        <td key={k}>VideoID: {k}
            <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId={k} 
            onClose={() => this.setState({isOpen: false})} />
            <button onClick={this.openModal}>Watch Video</button>
        </td>)
    }
</tr>

要查看输出，请单击此 link -https://7jrz33j35x.codesandbox.io/ Select 所有四个产品，然后单击比较按钮。比较显示的表格视图。在最后一行，每个产品都有一个 "watch video" 按钮。在按钮旁边，显示了各自的 id（用于调试目的），但是在单击观看视频时，将播放数组中最后一个 id 的视频

Answer 1

通过状态传递点击的按钮视频 ID.. 如下所示

this.state = {
  //use this props inside modal video view
  currentVideoId : null 
}

this.updateVideoId(currentVideoId){
  this.setState({currentVideoId})
}

//your jsx change button onClick like below
<tr>
    <th></th>
    {filteredProductVideoId.map(k => 
        <td key={k}>VideoID: {k}
            <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId={k} 
            onClose={() => this.setState({isOpen: false})} />
            <button onClick={()=>{this.updateVideoId(k)}}>Watch Video</button>
        </td>)
    }
</tr>

如何将列表中的 VideoId 传递给 React Modal Video

How to pass VideoId from a list to React Modal Video

reactjs

react-modal