Question

我想在我的react应用程序中单击按钮时在模态窗口中播放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的视频

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

1 个答案: