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

Question

当我更新数据网格中的单元格时，我只能通过propselectedCellParams检索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

add following to dataGrid

<DataGrid   
processRowUpdate={processRowUpdate}
/>

添加

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