如何在react中传递多个视频button onclick事件

Question

使用fetch调用API并在控制台中获得响应并将值分配给表头。然后在react js中创建一个按钮。每个按钮有一个视频URL，从API响应

API的回应:

Camera_Number:"Camera_1"
Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/0"
Camera_Number:"Camera_2"
Group_Name: "Group_2"
Video_Name: "http://localhost:4000/video/1"

我将此响应存储在useState中，并将此usestate响应传递给视频播放器源

const actionButton = (params) => {
setVideoName(response.videoName); //  How to update videoName here
setOpen(true);
};
const [videoName, setVideoName] = useState([]);
const [response, setResponse] = useState([]);
headerName: "Actions",
field: "Video_Name",
cellRendererFramework: (params) => (
<div>
<Button
variant="contained"
onClick={() => actionButton(params)}
>
Play
</Button>
</div>

上面的代码显示分配video_name到Actions头，然后我创建了一个按钮。当我点击一个按钮，所有的视频打开在一个窗口，并播放所有的视频。但是我想让它只显示被点击的视频

<DialogContent>
{response.map(({ Video_Name }) => (
<iframe
width="420"
height="315"
title="videos"
src={Video_Name}
/>
))}
</DialogContent>

如何使用react-hooks解决这个问题。

获取更多细节和代码参考

https://github.com/iamharry-dev/modal_popup

如何为视频创建索引并将视频传递到视频播放器源。当我点击那个按钮的时候，某个视频就会显示出来。

感谢

Answer 1

不需要使用按钮的click处理程序。你不能用它来获取行数据

将colId添加到操作的列定义中。然后处理网格的onCellClicked动作。您可以使用params.node.data获取行数据。

const [videoName, setVideoName] = useState("");
function onCellClicked(params) {
// maps to colId: "action" in columnDefs,
if (params.column.colId === "action") {
// set videoName for the row
setVideoName(params.node.data.Video_Name);
setOpen(true);
}
}
// grid config
<AgGridReact
...
rowData={response}
onCellClicked={onCellClicked}>
</AgGridReact>
// access videoName in dialog content
<DialogContent>
{/* <iframe width="420" height="315" title="videos" src={id} /> */}
<div>{videoName}</div>
</DialogContent>

code and box Link

Answer 2

更新答案:
首先，你必须安装json-loader

npm install --save-dev json-loader

之后，您可以使用动态导入。
(使用React Hooks的代码演示，对类组件做同样的操作)

import Record from './db.json'
// Syntax like:
// {
//     "Company_Name": "Fraction Analytics Limited",
//     "Floor Number": "Ground_Floor",
//     "Group_Name": "Group_1",
//     "Camera_Number": "Camera_2",
//     "Video_Name": "./videos/video1.mp4"
//   }
const MyComponent = () => {
const [video, setVideo] = useState(null);
useEffect(() => {
console.log(Record)
import(Record.Video_Name).then(res =>
setVideo(res)
)
}, [Record])

if (!video)
return <></>
return (
<DialogContent>
<iframe width="420" height="315" title='video'
src={video}>
</iframe>
</DialogContent>
)
}