MUI：如何以编程方式删除 DataGrid 中的选定行？

Question

我正在使用 MUI 创建文件列表 DataGrid。用户可以选中 DataGrid 中的复选框进行选择。我希望在用户执行某些操作（例如删除所选文件）后重置复选框。

我面临的问题是在我执行删除操作后，复选框仍然在同一个位置被选中。例如，在我按下删除按钮之前：

在我按下删除按钮后：

第二行的复选框仍然处于选中状态。如何以编程方式重置复选框？

const [selectedFile, setSelectedFile] = useState([]); // To keep selected file
const [files, setFiles] = useState([]); // To keep uploaded file

const deleteSelectedFile = () => {
  const filteredFileList = files.filter(
    (item) => !selectedFile.includes(item)
  );
  setFiles(filteredFileList);
};

 <DataGrid
    rows={displayFile ? displayFile : []}
    columns={columns}
    pageSize={3}
    checkboxSelection
    onSelectionModelChange={({ selectionModel }) =>
      setSelectedFile(selectionModel)
    }
  />

Answer 1

你可以试试这个，在数据网格中控制选择

 <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection
        onSelectionModelChange={(newSelection) => {
          setSelectionModel(newSelection.selectionModel);
        }}
        selectionModel={selectionModel}
        {...data}
      />
      <div aria-hidden onClick={() => setSelectionModel([])}>
        deselect all
      </div>
 </div>

onSelectionModelChange & selectionModel props can be used to control the selection values in data-grid.

参考这个code sandbox

Answer 2

selectionModel 不是 RowData 的数组，而是 RowId，因此在您的删除处理程序中，您需要检查 selectionModel 是否包含 item.id，不是 item:

const deleteSelectedFile = () => {
  const filteredFileList = files.filter(
    (item) => !selectedFile.includes(item.id) 
  );
  setFiles(filteredFileList);
};

并且因为您正在使用 controlled selection，您还需要向 DataGrid 提供 selectionModel 道具：

const [selectionModel, setSelectionModel] = React.useState([]);

<DataGrid
  {...props}
  onSelectionModelChange={setSelectionModel}
  selectionModel={selectionModel} // add this line
/>

MUI：如何以编程方式删除 DataGrid 中的选定行？

MUI: How to delete selected rows in DataGrid programmatically?

datagrid

reactjs

material-ui

现场演示