如何在反应中传递多个视频按钮的onclick事件

Question

使用 fetch 调用 API 并在控制台中获得响应并将值分配给 table header。之后在 React js 中创建一个按钮。每个按钮都有一个视频 URL 是从 API response

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 中并将此使用状态响应传递给视频播放器源

        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 header 然后我创建了一个按钮。当我单击一个按钮时，所有视频都会在一个 window 中打开并播放所有视频。但我希望它只显示被点击的特定视频。

 <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

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

npm install --save-dev json-loader

之后，您可以使用动态导入。
（使用 React Hooks 的代码演示，对 class 组件执行相同操作）

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

Answer 2

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

将 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>

Codesand box Link

如何在反应中传递多个视频按钮的onclick事件

How to pass multiple videos button onclick event in react

javascript

reactjs

react-hooks

use-effect

use-state