[英]How to play one video from array at a time in ReactJS & AG Grid
从 API 获取响应。 API 响应
API response :
0:
Camera_Number: "Camera_1"
Company_Name: "Fraction Analytics Limited"
Floor Number: "Ground_Floor"
Group_Name: "Group_1"
Video_Name: "http://localhost:4000/video/0"
将数据填充到表后创建一个按钮,然后 ag-grid 看起来像这样
我目前正在将所有视频映射到按钮,然后单击按钮它会打开多个视频,但我一次只想要一个视频。
应用程序.js
const initialValue = { Name: "", Floor: "", Group: "", Camera: "", Videos: "" };
export default function App(data, handleFormSubmit) {
const { id } = data;
const actionButton = (params) => {
setResponse(params.response);
setOpen(true);
};
const [response, setResponse] = useState(0);
const [open, setOpen] = React.useState(false);
const [formData, setFormData] = useState(initialValue);
const handleClose = () => {
setOpen(false);
setFormData(initialValue);
};
const onChange = (e) => {
const { value, id } = e.target;
// console.log(value,id)
setFormData({ ...formData, [id]: value });
};
const columnDefs = [
{ headerName: "Name", field: "Company_Name", filter: "agSetColumnFilter" },
{ headerName: "Floor", field: "Floor Number" },
{ headerName: "Group", field: "Group_Name" },
{ headerName: "Camera", field: "Camera_Number" },
{ headerName: "Videos", field: "Video_Name" },
{
headerName: "Actions",
field: "Video_Name",
cellRendererFramework: (params) => (
<div>
<Button
variant="contained"
size="medium"
color="primary"
onClick={() => actionButton(params)}
>
Play
</Button>
</div>
),
},
];
const onGridReady = (params) => {
console.log("grid is ready");
fetch("http://localhost:8000/get_all")
.then((resp) => resp.json())
.then((resp) => {
console.log(resp.results);
setResponse(resp.results);
params.api.applyTransaction({ add: resp.results });
});
};
return (
<div className="App">
<h1 align="center"> React FastAPI Integration</h1>
<h3> API Data </h3>
<div className="ag-theme-alpine" style={{ height: "400px" }}>
</div>
<div>
<DialogContent>
<iframe width="420" height="315" title="videos" src={id} />
</DialogContent>
;
<DialogActions>
<Button onClick={handleClose} color="secondary" variant="outlined">
Cancel
</Button>
<Button
color="primary"
onClick={() => handleFormSubmit()}
variant="contained"
>
{id ? "Update" : "Download"}
</Button>
</DialogActions>
</Dialog>
</div>
</div>
);
}
多个视频同时打开,我不知道如何一次正确播放一个。 我很感激任何帮助。 我已经坚持了几天了。
一次打开多个视频。 但我一次想要一个视频
如果我正确理解了这个问题,那是因为在DialogContent
中,您正在映射所有response
,并显示所有响应。 相反,为什么不在这里:
const actionButton = (params) => {
setOpen(true);
};
与其存储true
,不如存储单击的行的id
(似乎视频名称也适用于您的情况)。 然后在DialogContent
内只渲染一个iframe
,视频基于该id
。
PS。 您可以将!!id
作为open
属性传递给 Dialog,这意味着如果id
中有内容,则 Dialog 将打开(假设没有具有虚假值的 id)。
或者您实际上可以将整行本身存储在状态中,然后您可以更轻松地访问它,这是我的意思的简单示例:
let data = [
{ name: 'david', id: 0 },
{ name: 'nick', id: 1 },
{ name: 'john', id: 2 },
];
export default function App() {
let [clicked, setClicked] = React.useState(null);
return (
<div>
{data.map((x) => {
return (
<div
key={x.id}
onClick={() => {
setClicked(x);
}}
>
Row {x.name}
</div>
);
})}
<div>Clicked row {clicked && clicked.name}</div>
</div>
);
}
无需使用按钮的点击处理程序。 你不能用它来获取行数据。
将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>
输出- 单击任意行的播放按钮。 结果是行视频网址。 您现在可以使用它来播放实际视频。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.