我通过对后端进行 API 调用来将行填充到我的 X-Grid 表中。我正在努力从表中删除一行。我启用了复选框选择来选择一行,并且我已经编写了一个删除按钮来删除数据。到目前为止,我当前的代码只删除了表中的行,而不是后端。此外,当我在删除初始行后选择另一行时,删除的行会重新出现。
这是我的 X-Grid 代码:
<XGrid
apiRef={apiRef}
pageSize={pageSize}
page={page}
rowsPerPageOptions={[25, 50, 100]}
rowCount={total}
onPageChange={onHandlePageChange}
onPageSizeChange={onHandlePageSizeChange}
rows={rows}
columns={columns}
paginationMode="server"
pagination
checkboxSelection={true}
onSelectionModelChange={(newSelection) => {
setSelectionModel(newSelection.selectionModel);
if (disabled) {
handleRemoveButtonEnabled();
}
else {
handleRemoveButtonDisabled();
}
}}
selectionModel={selectionModel}
disableColumnResize={true}
hideFooterSelectedRowCount={true}
/>
这是我的删除按钮功能代码:
const [selectionModel, setSelectionModel] = React.useState([]);
const handleRowDelete = () => {
selectionModel.map(value => selectedRow = value);
apiRef.current.updateRows([{ id: selectedRow, _action: "delete" }]);
selectedRow = -1;
}
我已经尝试在各个地方进行控制台日志记录,似乎所选行在删除后仍保持选中状态。我有 selectedRow = -1; 那里的语句试图不选择任何行。我什至尝试使用 setSelectionModel(null) 或 setSelectionModel([]) 代替最后一条语句,但该行没有删除。我在控制台中没有看到任何错误,只是代码不起作用。