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

【问题标题】：MUI: How to delete selected rows in DataGrid programmatically?MUI：如何以编程方式删除 DataGrid 中的选定行？
【发布时间】：2023-04-03 13:23:01
【问题描述】：

我正在使用 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)
    }
  />

【问题讨论】：

标签： reactjs datagrid material-ui

【解决方案1】：

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

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

由于您使用的是controlled selection，因此您还需要将selectionModel 属性提供给DataGrid：

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

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

现场演示

【讨论】：

这需要更新，删除按钮不再起作用。
@ReactPotato 我已将答案更新为 v5。 API 应该比以前更简单。

【解决方案2】：

你可以试试这个，datagrid中的受控选择

 <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 可用于控制数据网格中的选择值。

参考这个code sandbox

【讨论】：

这对我有帮助：3 谢谢