reactjs - MUI - 在 DataGrid 中禁用多行选择

Question

我想阻止 MUI DataGrid多个复选框部分。当我选择复选框部分时，应选择特定行，而其他行保持未选择状态。我试过 disableMultipleSelection选项，但它不起作用。

<DataGrid
  rows={cycle}
  columns={columns}
  pageSize={10}
  checkboxSelection
  disableMultipleSelection
  onRowSelected={({ data, isSelected }) => {
    setDisplay(isSelected);
    setCycleId(data.key);
    setCycleImg(data.storageRef);
  }}
/>          

Answer 1

要禁用多行选择，您必须设置 checkboxSelection Prop 到false . disableMultipleSelection仅适用于 DataGridPro ，不是 DataGrid .

<DataGrid
  {...props}
  checkboxSelection={false} // or remove it because it's false by default
/>

如果您需要选择复选框和 single row selection ，您可能需要自己控制选择状态并在选择模型更改时删除除最新选择之外的所有选择:

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

return (
  <div style={{ height: 400, width: '100%' }}>
    <DataGrid
      rows={rows}
      columns={columns}
      pageSize={5}
      checkboxSelection
      selectionModel={selectionModel}
      hideFooterSelectedRowCount
      onSelectionModelChange={(selection) => {
        if (selection.length > 1) {
          const selectionSet = new Set(selectionModel);
          const result = selection.filter((s) => !selectionSet.has(s));

          setSelectionModel(result);
        } else {
          setSelectionModel(selection);
        }
      }}
    />
  </div>
);

现场演示
V5

V4