我正在使用 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)
}
/>
selectionModel不是一个数组RowData, but RowId，因此在删除处理程序中，您需要检查是否selectionModel包括一个item.id, not item:
const deleteSelectedFile = () => {
const filteredFileList = files.filter(
(item) => !selectedFile.includes(item.id)
);
setFiles(filteredFileList);
};
因为你正在使用受控选择 https://material-ui.com/components/data-grid/selection/#controlled-selection，您需要提供selectionModel道具DataGrid too:
const [selectionModel, setSelectionModel] = React.useState([]);
<DataGrid
{...props}
onSelectionModelChange={setSelectionModel}
selectionModel={selectionModel} // add this line
/>
现场演示
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
