单击 DataGrid 列内的按钮时如何删除行?

How to delete a row when a button is clicked inside a DataGrid column?

我有一个用户数据 table,我想让删除按钮在行上起作用,但似乎无法通过反应方式来完成。

DataGrid是这样使用的:

<DataGrid
  rows={users}
  columns={columns}
  pageSize={5}
  checkboxSelection
/>

我有一个包含自定义 renderCell 函数的列,它显示了一些操作按钮。列定义是这样的:

{
  field: "actions",
  headerName: "",
  width: 120,
  type: "",
  sortable: false,
  renderCell: (
    params: GridCellParams
  ): React.ReactElement<any, string | React.JSXElementConstructor<any>> => {
    return (
      <UserRowActions
        userId={params.getValue(params.id, "id")?.toString()!}
      />
    );
  }
}

params 对象提供了一些属性,但我不知道如何做这样的事情:删除单击按钮的行,该按钮是在 UserRowActions 组件中定义的。

我还想知道是否不能像现在这样使用 MUI DataGrid 组件来执行此操作。

我不知道该怎么办,因为 API 现在对我来说看起来并不反感。

我使用:

"@material-ui/core": "^4.12.1",
"@material-ui/data-grid": "^4.0.0-alpha.30",
"react": "^16.14.0",

我专门为数据网格操作按钮制作了一个context

export const DataGridContext = React.createContext<{ deleteUser?: (uid: string) => void }>({});

// ...

const { data: users, isLoading, isError } = useGetUsersQuery();

const [usersRows, setUsersRows] = useState<IUser[]>([]);

useEffect(() => {
  if (typeof users !== 'undefined') {
    setUsersRows(users);
  }
}, [users]);

<DataGridContext.Provider value={{ deleteUser: (uid: string) => {
  const newRows = [...usersRows];
  const idx = newRows.findIndex(u => u.id === uid);

  if (idx > -1) {
    newRows.splice(idx, 1);
    setUsersRows(newRows);
  }
}}}>
  <DataGrid
    rows={usersRows} // ...
  />
</DataGridContext.Provider>

// In the UserRowActions component:

const dataGrid = useContext(DataGridContext);

// ...

dataGrid.deleteUser!(userId);