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

Question

我有一个用户数据 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",

Answer 1

我专门为数据网格操作按钮制作了一个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);

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

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

reactjs

typescript

react-hooks

material-ui

mui-datatable