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

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

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

因为您使用的是受控选择，所以您也需要提供selectionModel道具DataGrid：

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

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

现场演示