Material-UI DataGrid开启checkboxSelection后如何绑定复选框点击事件？

解决方案 #

你不需要自定义渲染复选框列，直接用DataGrid内置的选中状态监听事件即可，具体实现如下：

1. 先声明受控的选中状态变量

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

// 组件内声明
const [selectionModel, setSelectionModel] = useState([]);

2. 在DataGrid组件上绑定onSelectionModelChange属性，这个事件会在任何选中状态变更时触发，包含点击行首复选框、点击表头全选复选框的场景，你可以在回调里直接执行你的update逻辑：

<DataGrid
  checkboxSelection
  columnBuffer={0}
  disableColumnMenu
  disableColumnSelector
  disableDensitySelector
  disableSelectionOnClick
  hideFooterPagination
  hideFooter
  rows={rows}
  columns={columns}
  onCellEditCommit={params => handleUpdate(params)}
  // 新增以下两个属性
  selectionModel={selectionModel}
  onSelectionModelChange={(newSelectionModel) => {
    setSelectionModel(newSelectionModel);
    // 这里直接执行你的update逻辑，newSelectionModel就是当前所有选中行的id数组
    update(newSelectionModel);
  }}
/>

如果需要区分触发事件的来源，你可以用回调第二个参数的details字段判断：

onSelectionModelChange={(newSelectionModel, details) => {
  setSelectionModel(newSelectionModel);
  if (details.source === 'headerCheckbox') {
    // 点击了表头全选复选框的专属逻辑
  } else if (details.source === 'checkbox') {
    // 点击了行首复选框的专属逻辑
  }
  update(newSelectionModel);
}}

方案优势 #

• 不需要自定义渲染整个复选框列，复用DataGrid内置的checkboxSelection所有原生功能，包括半选状态、分页全选逻辑等
• 逻辑更简洁，不需要手动维护选中状态的判断，避免自定义实现可能出现的状态不同步问题

内容的提问来源于stack exchange，提问作者J. Jackson