0

我正在尝试在我的反应应用程序中单击按钮时在模态窗口中播放 youtube 视频。我正在为模态使用“react-modal-window”节点模块。我正在获取一组 youtube 视频 ID，并通过以下方式将 ID 传递给模态，但模态窗口仅获取数组中的最后一个 ID。但是，如果我尝试打印视频 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>

要查看输出，请单击此链接 - https://7jrz33j35x.codesandbox.io/ 选择所有四个产品并单击比较按钮。比较显示的表格视图。在最后一行，每个产品都有一个“观看视频”按钮。在按钮旁边，显示了相应的 id（用于调试目的），但是在单击观看视频时，会播放数组中最后一个 id 的视频

4

1 回答 1

0

通过状态传递单击的按钮视频 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>
于 2019-03-04T06:23:57.077 回答