如何在 ReactJS 和 AG Grid 中一次播放数组中的一个视频

Question

正在从 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"

将数据填充到 table 后创建一个按钮，然后 ag-grid 看起来像这样

然后使用 fetch.after 调用 API 将响应存储在使用状态中，我目前正在将所有视频映射到按钮，我单击按钮会打开多个视频，但我一次只想要一个视频时间，但我不知道如何正确地一次播放一个。我感谢任何帮助。我已经坚持了几天。

app.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>
  );
}

同时打开多个视频，我不知道如何正确地一次播放一个。我感谢任何帮助。我已经坚持了几天。

一次打开多个视频。但我一次只想要一个视频

Answer 1

如果我正确理解了这个问题，那是因为在 DialogContent 中，您正在映射 all response，并显示所有这些。相反，为什么不在这里：

const actionButton = (params) => {
    setOpen(true);
  };

不是存储 true，而是存储所单击行的 id（视频名称似乎也适用于您的情况）。然后在 DialogContent 内只渲染一个 iframe，视频基于 id。

PS。您可以将 !!id 作为 open 属性传递给对话框，这意味着如果 id 中有内容，对话框将打开（假设没有带有虚假值的 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>
  );
}

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>

Output - 点击任意行的播放按钮。结果是视频行 url。您现在可以使用它来播放实际的视频。

如何在 ReactJS 和 AG Grid 中一次播放数组中的一个视频

How to play one video from array at a time in ReactJS & AG Grid

javascript

arrays

reactjs

react-native

react-hooks