我如何在React.js中播放模式视频(React视频播放器上弹出)的onClick事件的特定视频

Question

我在我的组件中修改了多个视频。所有我需要做的是，一旦我点击/播放一个特定的视频，一个弹出窗口应该出现播放视频与所有的控件在reactjs。

Answer 1

您应该使用react门户，您可以使用state来选择要播放的视频。

反应门户

反应useState

如果你有视频本身存储，甚至如果你只有视频的url。在显示多个视频时，您必须使用数组/对象，您可以复制选择。这应该是你的应用的理想结构。根组件(模态弹出的地方)应该有状态和回调(on)选择函数)，该函数应该传递给呈现多个视频的组件。这些视频中的每一个都必须在点击时调用on select函数(或者你想使用的任何事件处理程序)，然后在根组件中设置一个布尔值为true，并基于它呈现视频

编辑:我想我没有帮你选一个特定的视频。当您将它们呈现为列表时也是如此(我将该组件称为VideoList，并将每个视频称为VideoItem)你将有一个根组件(称为App)，你可以有以下结构:

App
CallbackFuncToSelectVideoAndUpdateState(selectedVideo){
}
VideoModal//(initially set it as null or don't render anything using a boolean)
VideoList
VideoItem onClick=(item)=>CallbackFuncToSelectVideoAndUpdateState(item) id=videoItemId

VideoItem.js

handleClick(props.id){
props.onClick(props.id)
}
return <div onClick=handleClick><otherComponentStructure/></div>