MUI DataGrid onCellEditStop返回旧值

Question

我正在尝试使用"@mui/x-data-grid"然后对单元格进行编辑并检索新值。

当我使用

onCellEditStop={(params: GridCellEditStopParams, event: MuiEvent) => {
console.log(params);
if (params.reason === GridCellEditStopReasons.cellFocusOut) {
event.defaultMuiPrevented = true;
}
}}

控制台日志输出旧参数，其中包括旧值，而不是已更改到的新单元格。

如何在编辑单元格后检索新值?

Answer 1

你需要的回调是onCellEditCommit:

onCellEditCommit={(params: GridCellEditCommitParams, event: MuiEvent) => {
console.log(params);
if (params.reason === GridCellEditStopReasons.cellFocusOut) {
event.defaultMuiPrevented = true;
}
}}

演示:https://codesandbox.io/s/datagriddemo-material-demo-forked-i9iz3f?file=/demo.tsx: 1661 - 1677

将具有新值的属性是value，如果可用，格式化的value将显示先前的值。