单击 MUI x 数据网格渲染按钮时使用 MUI Modal

Question

我想知道当您单击 mui x 数据网格表时如何设置模式。 我不知道它是如何工作的。我应该如何将模式放入数据网格表中（点击按钮）

function UserDataGrid() {
  const { allUsers, filteredUsers, setFilteredUsers, traffics } =
    useContext(UserContext);

  const handleEvent = (e) => {
    console.log(e.field);
  };

  const columns = [
    { field: "id", headerName: "ای دی" },
    { field: "username", headerName: "یوزر" },
    {
      field: "enable",
      headerName: "وضعیت",
      type: "boolean",
      width: 140,
      editable: true,
      renderCell: (params) => {
        return params.value ? <p>فعال</p> : <p>غیر فعال</p>;
      },
    },
    { field: "startdate", headerName: "تاریخ شروع", headerAlign: "center" },
    { field: "finishdate", headerName: "تاریخ پایان" },
    { field: "mobile", headerName: "موبایل" },
    { field: "referral", headerName: "معرف" },
    { field: "traffic", headerName: "ترافیک" },
    {
      field: "action",
      headerName: "Action",
      width: 180,
      sortable: false,
      disableClickEventBubbling: true,

      renderCell: (params) => {
        const onClick = (e) => {
          const currentRow = params.row;
          return alert(JSON.stringify(currentRow, null, 4));
        };

        return (
          <div direction="row" spacing={2}>
            <Button onClick={onClick}>Delete</Button>
            <Button onClick={onClick}>Edit</Button>
          </div>
        );
      },
    },
  ];

  return (
    <div>
      <DataGrid
        rows={allUsers}
        columns={columns}
        loading={!allUsers.length}
        onCellClick={handleEvent}
      />
    </div>
  );
}

export default UserDataGrid;

例如，我希望当我单击包含该行详细信息的每一行上的删除按钮时呈现此模式。我想在行上添加一些按钮，这些按钮在单击时打开模式并将请求发送到服务器。

export default function DeleteModal() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Text in a modal
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </div>
  );
}

Answer 1

您可以在

Modal

组件下方添加

DataGrid

组件，并在

Modal

按钮单击时管理

Delete

的打开和关闭状态。我已经实施了一个解决方案here。