如何获取Material UI Data Grid中特定单元格的更新值

Question

当我更新数据网格中的单元格时，我只能通过此处的属性selectedCellParams检索ID和字段，但无法获取其修改后的值。

我想在 handleSaveOrEdit() 函数中获取所选值，以完成更新 API 的 PUT 请求。如何使用 MUI 文档中给出的 getValue。

完整代码如下；

import * as React from 'react';
import PropTypes from 'prop-types';
import { Typography, Grid } from "@mui/material";
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import { DataGrid, GridCellModes } from '@mui/x-data-grid';
import { styled } from '@mui/material/styles';
import { useState, useEffect } from "react";
import Avatar from "@mui/material/Avatar";
import axios from 'axios';

const DrawerHeader = styled('div')(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    ...theme.mixins.toolbar,
}));

function EditToolbar(props) {
    const { selectedCellParams, cellMode, cellModesModel, setCellModesModel } = props;

    const handleSaveOrEdit = () => {
        if (!selectedCellParams) {
            return;
        }
        const { id, field } = selectedCellParams;
        if (cellMode === 'edit') {
            setCellModesModel({
                ...cellModesModel,
                [id]: { ...cellModesModel[id], [field]: { mode: GridCellModes.View } },
            });
            
            const getValue = (params) => console.log(params.value);
            console.log('value:::', getValue);

        } else {
            setCellModesModel({
                ...cellModesModel,
                [id]: { ...cellModesModel[id], [field]: { mode: GridCellModes.Edit } },
            });
        }
    };

    const handleCancel = () => {
        if (!selectedCellParams) {
            return;
        }
        const { id, field } = selectedCellParams;
        setCellModesModel({
            ...cellModesModel,
            [id]: {
                ...cellModesModel[id],
                [field]: { mode: GridCellModes.View, ignoreModifications: true },
            },
        });
    };

    const handleMouseDown = (event) => {
        // Keep the focus in the cell
        event.preventDefault();
    };

    return (
        <Box
            sx={{
                borderBottom: 1,
                borderColor: 'divider',
                p: 1,
            }}
        >
            <Button
                onClick={handleSaveOrEdit}
                onMouseDown={handleMouseDown}
                disabled={!selectedCellParams}
                color="primary"
                variant="outlined"
            >
                {cellMode === 'edit' ? 'Save' : 'Edit'}
            </Button>
            <Button
                onClick={handleCancel}
                onMouseDown={handleMouseDown}
                disabled={cellMode === 'view'}
                color="primary"
                variant="outlined"
                sx={{ ml: 1 }}
            >
                Cancel
            </Button>
        </Box>
    );
}

EditToolbar.propTypes = {
    cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
    cellModesModel: PropTypes.object.isRequired,
    selectedCellParams: PropTypes.shape({
        field: PropTypes.string.isRequired,
        id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
    }),
    setCellModesModel: PropTypes.func.isRequired,
};

export default function Donees() {
    const [selectedCellParams, setSelectedCellParams] = React.useState(null);
    const [cellModesModel, setCellModesModel] = React.useState({});

    const [tableData, setTableData] = useState([])
    const [fname, setFname] = useState("");
    const [lname, setLname] = useState("");
    const [address, setAddress] = useState("");
    const [dob, setDob] = useState("");
    const [gender, setGender] = useState("");
    const [email, setEmail] = useState("");
    const [phone, setPhone] = useState("");
    const [grade, setGrade] = useState("");
    const [photo, setPhoto] = useState("");

    useEffect(() => {
        fetch("http://localhost:4000/donees")
            .then((data) => data.json())
            .then((data) => setTableData(data))

    }, [])

    useEffect(() => {
        axios.get("http://localhost:4000/donees")
            .then((response) => {
                setFname(response.data.fname);
                setLname(response.data.lname);
                setAddress(response.data.address);
                setDob(response.data.dob);
                setGender(response.data.gender);
                setEmail(response.data.email);
                setPhone(response.data.phone);
                setGrade(response.data.grade);
                setPhoto(response.data.photo);
            })
    }, [])

    // console.log(tableData);

    const handleCellFocus = React.useCallback((event) => {
        const row = event.currentTarget.parentElement;
        const id = row.dataset.id;
        const field = event.currentTarget.dataset.field;
        setSelectedCellParams({ id, field });
    }, []);

    const cellMode = React.useMemo(() => {
        if (!selectedCellParams) {
            return 'view';
        }
        const { id, field } = selectedCellParams;
        return cellModesModel[id]?.[field]?.mode || 'view';
    }, [cellModesModel, selectedCellParams]);

    const handleCellKeyDown = React.useCallback(
        (params, event) => {
            if (cellMode === 'edit') {
                // Prevents calling event.preventDefault() if Tab is pressed on a cell in edit mode
                event.defaultMuiPrevented = true;
            }
        },
        [cellMode],
    );

    return (
        <Box component="main">
            <DrawerHeader />
            <Typography sx={{ textAlign: "center", pt: 5 }} variant="h5">Donees Table</Typography>
            <Grid container spacing={3} sx={{ pl: 15, pr: 15, pt: 5 }}>
                <div style={{ height: 400, width: '100%' }}>
                    <DataGrid
                        rows={tableData}
                        columns={columns}
                        getRowId={(row) => row._id}
                        onCellKeyDown={handleCellKeyDown}
                        cellModesModel={cellModesModel}
                        components={{
                            Toolbar: EditToolbar,
                        }}
                        componentsProps={{
                            toolbar: {
                                cellMode,
                                selectedCellParams,
                                setSelectedCellParams,
                                cellModesModel,
                                setCellModesModel,
                            },
                            cell: {
                                onFocus: handleCellFocus,
                            },
                        }}
                        experimentalFeatures={{ newEditingApi: true }}
                    />
                </div>
            </Grid>
        </Box>
    );
}

const columns = [
    { field: 'fname', headerName: 'First Name', width: 140, editable: true },
    { field: 'lname', headerName: 'Last Name', width: 140, editable: true },
    { field: 'address', headerName: 'Address', width: 200, editable: true },
    { field: 'dob', headerName: 'Date of Birth', width: 140, editable: true },
    { field: 'gender', headerName: 'Gender', width: 100, editable: true },
    { field: 'email', headerName: 'Email ID', width: 140, editable: true },
    { field: 'phone', headerName: 'Mobile Number', type: 'number', width: 140, editable: true },
    { field: 'grade', headerName: 'Grade', width: 180, editable: true },
    {
        field: 'photo', headerName: 'Photo', width: 180, editable: true, renderCell: (params) => {
            // console.log(params);
            return (
                <>
                    <Avatar src={params.value} />
                </>
            );
        }
    },
];

Answer 1

将以下内容添加到数据网格

<DataGrid   
processRowUpdate={processRowUpdate}
/>

添加

 const processRowUpdate = (newRow: any) => {
    const updatedRow = { ...newRow, isNew: false };
    console.log(updatedRow);
    //handle send data to api
    return updatedRow;
  };

Answer 2

你是怎么解决的？使用 GridCellParams 面临同样的问题。属性值只是给我当前值，而不是更新后的值