如何通过React中的多个视频按钮按钮onclick事件

Question

使用fetch调用API并在控制台中获取响应，然后将值分配给表标头。 之后，在React Js中创建一个按钮。每个按钮都有一个视频URL，该视频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>

上面的code show dission_name到action> 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

无需使用按钮的点击处理程序。您无法获得行数据。

将colid添加到操作列定义。然后处理网格的操作。您可以使用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>

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>
    )
}