当我在MUI X数据网格中编辑单元格时，如何在USESTATE中升级总数？

Question

这是我在网站上的第一个问题，所以我希望我能做得很好。我尝试使用MUI X Data Grid的编辑模式，但自从几天以来，我就陷入了似乎很简单的问题：

我想更新一个没有在数据杂志上显示给用户的总数，但是当我编辑单元格时我无法正确更新它：

import {
    DataGrid,
    GridColDef,
    GridCellParams,
    gridClasses,
    useGridApiRef, MuiEvent
} from "@mui/x-data-grid";
import {Box} from "@mui/material";
import * as React from "react";
import {DetailCommande, Ligne} from "../../../../app/models/commande";
import {useState} from "react";

type row = {
    id: number,
    reference: string | null,
    qte: number,
    qteLivree: number,
    designation: string,
    prixUnitaire: number,

}

const TableauValidationBL = ({commande}: { commande: DetailCommande }) => {

    const apiRef = useGridApiRef()

    const columns: GridColDef[] = [
        {field: 'reference', headerName: 'Référence', width: 120, headerClassName: 'header'},
        {field: 'designation', headerName: 'Désignation', flex: 1, headerClassName: 'header'},
        {
            field: 'qteLivree',
            headerName: 'Qté validé',
            width: 120,
            headerClassName: 'header',
            editable: true,
            type: 'number'
        },
        {field: 'prixUnitaire', headerName: 'Prix Unitaire', width: 120, headerClassName: 'header'},
        {
            field: 'prixTotal', headerName: 'Prix Total', width: 120, headerClassName: 'header',
            valueGetter: (value, row) => {
                return (row.prixUnitaire * row.qteLivree).toFixed(3);
            }
        },
    ];

    const rows = commande ? commande.lignes.map((ligne: Ligne) => {
                return {
                    id: ligne.idPackaging,
                    reference: ligne.refFournisseur,
                    qte: ligne.qteCmd,
                    qteLivree: ligne.qteCmd,
                    designation: ligne.nomArticle,
                    prixUnitaire: ligne.prixUnitaire,
                }
            }
        )
        : [];

    const [total, setTotal] = useState(rows.reduce((acc, row) => acc + row.prixUnitaire * row.qteLivree, 0));

    return (
        <Box
            sx={{
                '.header': {backgroundColor: 'lightgrey', fontSize: '1.2em'},
                [`.${gridClasses.cell}.changed`]: {
                    backgroundColor: '#76CDCD',
                },
                [`.${gridClasses.cell}.unchanged`]: {
                    backgroundColor: '#7AA95C',
                },
            }}
        >
            <p>{total}</p>
            <DataGrid
                autoHeight
                hideFooter
                getRowHeight={() => 'auto'}
                rows={rows}
                columns={columns}
                apiRef={apiRef}
                showCellVerticalBorder
                getCellClassName={(params: GridCellParams) => {
                    if (params.field === 'qteLivree' && params.value !== params.row.qte) {
                        return 'changed';
                    }
                    if (params.field === 'qteLivree' && params.value === params.row.qte) {
                        return 'unchanged';
                    }
                    return '';
                }}
                // checkboxSelection
            />
        </Box>
    );
};

export default TableauValidationBL;

我尝试做的是使用户有可能更改交货的实际数量，并更新总计。我进行编辑时，每个行的总工作总数。 我很确定我一开始就做错了，但它以这种方式起作用。但是，当我编辑一个单元格时，我不知道如何使总计更新。

我已经尝试使用OnCelleDitStop，但我没有获得最后一个值。我尝试使用ProcessRowupdate Aswell：更新一行时它可以正常工作，但是如果我更新另一个行，我更新了第一行，请返回到初始值。

为您服务：

-Prixunitaire：一件物品的价格

Qtelivree：已交付的项目数

• 希望您可以帮助我，并为该价值的法语名称感到抱歉。
您可以将其连接到

ProcessRowupdate回调

，这将使您访问更新的对象。然后，您可以循环浏览

rows

Answer 1

total

state。 您首先需要将您的rows

移到一个：

：useState

然后您可以修改您的

const [rows, setRows] = useState([
  {
    id: 1,
    reference: 'Item 1',
    qteLivree: 3,
    prixUnitaire: 10,
    prixTotal: 1,
  },
  {
    id: 2,
    reference: 'Item 2',
    qteLivree: 2,
    prixUnitaire: 5,
    prixTotal: 1,
  },
  {
    id: 3,
    reference: 'Item 3',
    qteLivree: 4,
    prixUnitaire: 20,
    prixTotal: 1,
  },
]);

添加

<DataGrid>

回调：

processRowUpdate

然后实现以下功能：

<DataGrid
    rows={rows}
    columns={columns}
    ...
    processRowUpdate={editFinished}
/>

出于某种原因，此函数必须在其中返回该行，否则会丢弃错误（如果您选择实现它，则可以被

const editFinished = (updatedRow, originalRow) => {
  const rowId = updatedRow.id;
  for (let i = 0; i < rows.length; i++) {
    if (rows[i].id === rowId) {
      rows[i].qteLivree = updatedRow.qteLivree;
    }
  }
  setTotal(
    rows.reduce((acc, row) => acc + row.prixUnitaire * row.qteLivree, 0)
  );
  return updatedRow;
};

回调抓住）。

现在，当您在

id

列中编辑单元格值时，它将更新数据网格上方的总数。有关工作演示，请参见thisstackblitz