llame a la API usando fetch y obtener respuesta en la consola y asigne valores al encabezado de la tabla. después de eso, crea un botón en reaccionar js. Cada botón tiene una URL de video que se obtiene de la respuesta de la API
respuesta 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" Almacené esta respuesta en useState y pasé esta respuesta de usestate a la fuente del reproductor de video
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> El código anterior muestra asignar video_name al encabezado de Actions y luego creé un botón. cuando hago clic en un botón, todos los videos se abren en una ventana y reproducen todos los videos. Pero lo quiero para que solo se muestre ese video en el que se hizo clic.
<DialogContent> {response.map(({ Video_Name }) => ( <iframe width="420" height="315" title="videos" src={Video_Name} /> ))} </DialogContent>Cómo resolver este problema usando ganchos de reacción.
para más detalles y referencia de código
cómo crear un índice para video y pasar videos a la fuente del reproductor de video. cuando hago clic en ese botón, se muestra cierto video en el que se hizo clic.
Gracias
No es necesario utilizar el controlador de clics del botón. No puede obtener datos de fila con eso.
Agregue un colId a la definición de columna para las acciones. Luego maneje la acción onCellClicked de la cuadrícula. Puede obtener los datos de la fila usando 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>Actualizar respuesta:
Primero, tienes que instalar json-loader
npm install --save-dev json-loader Después de eso, puede usar la importación dinámica.
(demostración de código usando React Hooks, haga lo mismo con el componente de clase)
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> ) }