单击行材料-ui DataGrid内的按钮时如何设置行数据？

Question

我有一个 Material-UI DataGrid 组件，它有一个连续的编辑和删除按钮，但我只能做警报或控制台日志，

为什么会有按钮在一行，因为点击按钮时需要对话框，例如当用户点击删除按钮时会有一个删除操作的确认对话框，或者当点击一个编辑按钮时会有一个表单对话框更新行，

需要推送用户同时只编辑或删除一项。所以不允许多选。

我的问题是如何在点击列定义内的按钮时获取组件中的行数据，在这种情况下，点击Edit或Delete按钮。

使用"@material-ui/data-grid": "^4.0.0-alpha.26"

import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit";
import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add";
import { makeStyles } from "@material-ui/core/styles";
import {
  DataGrid,
  GridColDef,
  GridApi,
  GridCellValue
} from "@material-ui/data-grid";

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 70 },
  { field: "name", headerName: "First name", width: 130 },
  { field: "surname", headerName: "Last name", width: 130 },
  {
    field: "edit",
    headerName: "Edit",
    sortable: false,
    width: 130,
    disableClickEventBubbling: true,
    renderCell: (params) => {
      const onClick = () => {
        const api: GridApi = params.api;
        const fields = api
          .getAllColumns()
          .map((c) => c.field)
          .filter((c) => c !== "__check__" && !!c);
        const thisRow: Record<string, GridCellValue> = {};

        fields.forEach((f) => {
          thisRow[f] = params.getValue(f);
        });

        // set to state rather then alert
        return alert(JSON.stringify(thisRow, null, 4));
      };
      return (
        <Button
          variant="contained"
          color="primary"
          startIcon={<EditIcon />}
          onClick={onClick}
        >
          Edit
        </Button>
      );
    }
  },
  {
    field: "delete",
    headerName: "Delete",
    sortable: false,
    width: 130,
    disableClickEventBubbling: true,
    renderCell: (params) => {
      const onClick = () => {
        const api: GridApi = params.api;
        const fields = api
          .getAllColumns()
          .map((c) => c.field)
          .filter((c) => c !== "__check__" && !!c);
        const thisRow: Record<string, GridCellValue> = {};

        fields.forEach((f) => {
          thisRow[f] = params.getValue(f);
        });

        // set to state rather then alert
        return alert(JSON.stringify(thisRow, null, 4));
      };
      return (
        <Button
          variant="contained"
          color="secondary"
          startIcon={<DeleteIcon />}
          onClick={onClick}
        >
          Delete
        </Button>
      );
    }
  }
];

const rows = [
  { id: 1, name: "Example 1", surname: "example" },
  { id: 2, name: "Example 2", surname: "example" }
];

export type User = {
  id: number;
  name: string;
  surname: string;
};

const useStyles = makeStyles((theme) => ({
  content: {
    flexGrow: 1,
    height: "100vh",
    overflow: "auto"
  },
  appBarSpacer: theme.mixins.toolbar,
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4)
  },
  paper: {
    padding: theme.spacing(2),
    display: "flex",
    overflow: "auto",
    flexDirection: "column",
    elevation: 3
  }
}));

const App = () => {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.appBarSpacer} />
      <Container maxWidth="lg" className={classes.container}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <DataGrid
              rows={rows}
              columns={columns}
              pageSize={10}
              columnBuffer={8}
              autoHeight
            />
          </Paper>
        </Grid>
        <Grid item xs={3} style={{ padding: 20 }}>
          <Button
            variant="contained"
            color="primary"
            startIcon={<AddIcon />}
            onClick={() => {
              console.log("new");
            }}
          >
            New
          </Button>
        </Grid>
      </Container>
    </main>
  );
};

export default App;

Answer 1

DataGrid 组件有一个 prop onCellClick 来处理用户单击数据网格中的任何单元格时的事件。该道具使用GridCellParams类型，只需要根据GridCellParams.colDef.field属性过滤列即可。

代码修改如下；

编辑：根据Material-UI documentation，GridCellParams 属性getValue 刚刚更改。现在它需要两个参数； getValue(id: GridRowId, field: string)

import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";
import {
  DataGrid,
  GridColDef,
  GridApi,
  GridCellValue,
  GridCellParams
} from "@material-ui/data-grid";
import React, { useState } from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogContentText,
  DialogActions
} from "@material-ui/core";

const columns: GridColDef[] = [
  { field: "id", headerName: "ID", width: 70 },
  { field: "name", headerName: "First name", width: 130 },
  { field: "surname", headerName: "Last name", width: 130 },
  {
    field: "edit",
    headerName: "Edit",
    sortable: false,
    width: 130,
    disableClickEventBubbling: true,
    renderCell: () => {
      return (
        <Button variant="contained" color="primary" startIcon={<EditIcon />}>
          Edit
        </Button>
      );
    }
  },
  {
    field: "delete",
    headerName: "Delete",
    sortable: false,
    width: 130,
    disableClickEventBubbling: true,
    renderCell: () => {
      return (
        <Button
          variant="contained"
          color="secondary"
          startIcon={<DeleteIcon />}
        >
          Delete
        </Button>
      );
    }
  }
];

const rows = [
  { id: 1, name: "Example 1", surname: "example" },
  { id: 2, name: "Example 2", surname: "example" }
];

export type User = {
  id: number;
  name: string;
  surname: string;
};

const useStyles = makeStyles((theme) => ({
  content: {
    flexGrow: 1,
    height: "100vh",
    overflow: "auto"
  },
  appBarSpacer: theme.mixins.toolbar,
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4)
  },
  paper: {
    padding: theme.spacing(2),
    display: "flex",
    overflow: "auto",
    flexDirection: "column",
    elevation: 3
  }
}));

const App = () => {
  const classes = useStyles();
  const [selectedUser, setSelectedUser] = useState({} as User);
  const [openDialog, setOpenDialog] = useState(false);

  function currentlySelected(params: GridCellParams) {
    const api: GridApi = params.api;
    const value = params.colDef.field;

    if (!(value === "edit" || value === "delete")) {
      return;
    }

    const fields = api
      .getAllColumns()
      .map((c) => c.field)
      .filter((c) => c !== "__check__" && !!c);
    const thisRow: Record<string, GridCellValue> = {};

    fields.forEach((f) => {
      thisRow[f] = params.getValue(params.id, f);
    });

    const user = {} as User;
    user["id"] = Number(thisRow["id"]);
    user["name"] = thisRow["name"]!.toString();
    user["surname"] = thisRow["surname"]!.toString();

    setSelectedUser(user);
    setOpenDialog(true);
  }

  const handleClose = () => {
    setOpenDialog(false);
  };

  return (
    <main className={classes.content}>
      <div className={classes.appBarSpacer} />
      <Container maxWidth="lg" className={classes.container}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <DataGrid
              rows={rows}
              columns={columns}
              pageSize={10}
              columnBuffer={8}
              autoHeight
              onCellClick={currentlySelected}
            />
          </Paper>
        </Grid>
      </Container>
      <Dialog
        open={openDialog}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title"> User </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {JSON.stringify(selectedUser)}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Confirm
          </Button>
        </DialogActions>
      </Dialog>
    </main>
  );
};

export default App;

Answer 2

更新 - 2021 年

06/08/2021 - 最新答案

以下内容按预期对我有用。

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 100, hide: true },
  {
    field: 'action',
    width: 130,
    sortable: false,

    renderCell: (params) => {
      const onClickDelete = async () => {
        return alert(JSON.stringify(params.row, null, 4));
      };
      const onClickEdit = async () => {};

      return (
        <>
          <IconButton color="secondary" onClick={onClickDelete}>
            <DeleteIcon />
          </IconButton>
          <IconButton color="secondary" onClick={onClickEdit}>
            <EditIcon />
          </IconButton>
        </>
      );
    },
  },