[英]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.