在 MUI 数据网格中动态更改单元格值

Question

在我的数据网格中，我有 9 列，您可以看到有两列名为Rate和Transfer。我还有一列，Total我想在其中显示Rate和与单元格值Transfer变化的乘法结果。请注意，我已将列设置为可编辑，以便列的值随传输值而变化。其中有一个名为的道具，在您单击单元格外部后，它会为您提供单元格值。但这并没有给你更新的值。我尝试使用和设置单元格的值并相应地更新。但这没有用。希望我已经清楚地解释了我想在这里实现的目标。TransferTransferTotalDataGridonCellFocusOut()useEffect()useState()TransferTotal

我的代码

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="left" ref={ref} {...props} />;
});

function FullScreenDialog({ open, handleClose }) {
  const columns = [
    {
      field: "Lot",
      headerName: "Lot#",
      width: 200,
      editable: false,
    },
    { field: "Bill", headerName: "Bill#", width: 130, editable: false },
    {
      field: "Shelf",
      headerName: "Shelf",
      width: 200,
      editable: false,
    },
    {
      field: "Bin",
      headerName: "Bin",
      width: 200,
      editable: false,
    },
    {
      field: "Rate",
      headerName: "Rate",
      width: 200,
      editable: false,
    },
    {
      field: "Stock",
      headerName: "Stock Balance Qty.",
      width: 200,
      editable: false,
    },
    {
      field: "Transfer",
      headerName: "Transfer Qty.",
      width: 200,
      editable: true,
    },
    {
      field: "Total",
      headerName: "Total",
      width: 200,
      editable: false,
    },
  ];

  // React.useEffect(() => {
  //   setTotal(rate * transfer);
  //   console.log("total", total);
  // }, [transfer]);

  const [transferCellValue, setTransferCellValue] = React.useState(null);
  const [total, setTotal] = React.useState(1);
  console.log("transfer cell value", transferCellValue);
  const defaultRows = [
    {
      id: 1,
      Lot: "2101000134",
      Bill: "M0000013092",
      Shelf: "W13-A1",
      Bin: "B01",
      Rate: 221,
      Stock: 128.0,
      Transfer: 12,
      Total: total,
    },
  ];

  // console.log(transferCellValue);

  return (
    <div>
      <Dialog
        fullScreen
        open={open}
        onClose={handleClose}
        TransitionComponent={Transition}
      >
        <div style={{ height: 400, width: "100%" }}>
          <DataGrid
            rows={defaultRows}
            columns={columns}
            onCellFocusOut={(e) => console.log(e.value)}
          />
        </div>
      </Dialog>
    </div>
  );
}

Answer 1

如果您只想通过 计算总计列Transfer * Rate，则可以使用valueGetter返回动态值。

valueGetter：允许获取特定数据而不是字段以在单元格中呈现的函数。

{
  field: "Total",
  headerName: "Total",
  width: 200,
  valueGetter: (params) => params.row.Transfer * params.row.Rate
}

https://codesandbox.io/s/mui-datagrid-dynamic-column-tdod5