reactjs - MUI DataGrid onCellEditStop 返回旧值

Question

我正在尝试使用来自“@mui/x-data-grid”的编辑 API，只需对单元格进行编辑并检索新值。

当我使用

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

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