reactjs - How to delete a row in Material UI DataGrid and persist to server with processRowUpdate? - Stack Overflow

admin管理员组

文章数量:1417461

I'm using a DataGrid with actions (Edit, Delete, etc). I based my code on the example given in the documentation for "Full Featured CRUD":

In the example, when the user clicks on the Edit or Save buttons, SetRowModesModel() is called to change the row mode to GridRowModes.Edit when the Edit button is pressed, and to GridRowModes.View when the Save button is pressed.

const handleEditClick = (id: GridRowId) => () => {
  setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
};

const handleSaveClick = (id: GridRowId) => () => {
  setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
};

Setting the mode to GridRowModes.View causes processRowUpdates() to be called, and any server side persistence should happen in there, according to the docs:

But in the "Full Featured CRUD" example, when the delete button is clicked, the selected row is merely deleted from the 'rows' state variable.

const handleDeleteClick = (id: GridRowId) => () => {
  setRows(rows.filter((row) => row.id !== id));
};

This does not cause processRowUpdates() to be called, so it's not possible to use that function to call the server to delete the row.

And yet, in the documentation for processRowUpdates(), it suggests using that callback for deleting a row, if you write a function to determine if the row is being deleted:

<DataGrid
  {...otherProps}
  processRowUpdate={(updatedRow, originalRow) => {
    if (shouldDeleteRow(updatedRow)) {
      return { ...updatedRow, _action: 'delete' };
    }
    return updatedRow;
  }}
/>

How would this scenario even happen, since processRowUpdates() isn't called when the delete button is clicked?

Every other example of deleting a row seems to just delete the row locally, without the server-side persistence.

How can I cause the processRowUpdates() to be triggered, so I can persist the deletion? According to the docs "When the user performs an action to stop editing, the processRowUpdate callback is triggered." The docs say that editing can be stopped by the user input or calling apiRef.current.stopCellEditMode({ id, field }) or apiRef.current.stopRowEditMode

That doesn't work in my case, since we aren't in edit mode to begin with.

本文标签：