IT技术 - MUI：如何以编程方式删除 DataGrid 中的选定行？ - 吾爱随笔录

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

IT技术 reactjs datagrid material-ui

2021-04-30 17:36:24

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

2个回答

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

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

并且因为您使用的是受控选择，所以您也需要提供selectionModelpropsDataGrid：

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

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

现场演示

你可以试试这个，数据网格中的受控选择

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

参考这个代码沙箱

其它你可能感兴趣的问题

上一篇typescript显然为派遣的 Thunk 推断出错误的类型下一篇react onChange 事件不返回对象