播放按钮onclick视频播放器中的react js

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(params.videoName); // I am assuming but need to update videoName here
    setOpen(true);
  };
      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

响应状态对象包含完整的API响应。 ＆lt; dialogContent＆gt;映射此＆amp;创建多个iframe 元素。我们不需要映射＆amp;创建多个iFrames-

<DialogContent>
  {response.map(({ Video_Name }) => (
...

而不是根据单击行的视频名称创建对话框内容。

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>
 <div>{videoName}</div>
</DialogContent>

​结果是行视频URL。您现在可以使用它播放实际的视频。