MUI 数据表删除行答案

【问题标题】：MUI Datatables delete rowsMUI 数据表删除行
【发布时间】：2021-12-14 18:58:45
【问题描述】：

我正在使用带有 MUI 数据表的自定义工具栏，并且可以访问当前选定的行，但是当我删除这些行时，我想清除选定的行。在当前行为上，如果我选择并删除前两行 (0,1)，这些行将从 MUI 数据表中删除，但选择更改为行 (2,3)。

const options = {
     filterType: 'checkbox',
     customToolbarSelect: selectedRows => (
       <MyCustomToolbarSelect
         selectedRows={selectedRows}
         onRowsDelete={deleteSelected}
       />
     ),
   }

【问题讨论】：

在您的onRowsDelete 函数中，您需要将所有选择重置为取消选中。我假设您在删除之前设置了已选中的状态，因此将所有复选框的状态恢复为已选中 = false。

标签： reactjs mui-datatable

【解决方案1】：

事实证明，您可以设置一个状态变量来保存选定的行并更改 onRowsDelete 上的值：

const [selectedRows, setSelectedRows] = useState([]);

const options = {
  rowsSelected: selectedRows,
  onRowSelectionChange: (rowsSelectedData, allRows, rowsSelected) => {
    setSelectedRows(rowsSelected);
  },
  customToolbarSelect: () => (
    <MyCustomToolbarSelect
      selectedRows={selectedRows}
      onRowsDelete={() => {
        deleteSelected();
        setSelectedRows([]);
      }
    />
  ),

您可以在此处访问使用类组件的示例：https://codesandbox.io/s/muidatatables-custom-toolbar-hv5n9?file=/index.js

【讨论】：