AG Grid React中如何捕获行复选框状态变更事件？

AG Grid 提供了两种可靠的方式来仅捕获复选框的勾选/取消勾选操作，避免和行选中事件混淆：

方法一：利用 onCellValueChanged 事件 #

复选框列的本质是布尔值单元格，用户点击复选框时会触发单元格值变更事件，而行选中（点击行其他区域）不会触发该事件。你可以通过判断触发事件的列是否为复选框列，精准处理状态变化：

const gridOptions = {
  columnDefs: [
    {
      headerName: '待检查',
      field: 'needsReview',
      checkboxSelection: true, // 启用复选框
      editable: true // 复选框点击需开启编辑权限
    },
    // 其他列定义...
  ],
  onCellValueChanged: (event) => {
    // 判断当前列是否为复选框列
    if (event.column.colDef.checkboxSelection) {
      const rowData = event.data;
      const isChecked = event.newValue;
      console.log(`行 ${rowData.id} 的复选框状态变为: ${isChecked}`);
      // 执行你的业务逻辑
    }
  },
  // 其他Grid配置...
};

// 组件中渲染AG Grid
<AgGridReact gridOptions={gridOptions} rowData={yourRowData} />

方法二：自定义复选框组件 #

如果需要更精细的控制，可以自定义复选框单元格组件，直接绑定专属的 onChange 事件，完全绕过行选中的干扰：

// 自定义复选框组件
const CustomCheckbox = (props) => {
  const handleChange = (e) => {
    const isChecked = e.target.checked;
    // 更新行数据中的复选框值
    props.api.applyTransaction({
      update: [{ ...props.data, needsReview: isChecked }]
    });
    // 触发你的业务逻辑
    console.log(`行 ${props.data.id} 的复选框状态变更为: ${isChecked}`);
  };

  return (
    <input
      type="checkbox"
      checked={props.data.needsReview}
      onChange={handleChange}
    />
  );
};

// 列定义中使用自定义组件
const gridOptions = {
  columnDefs: [
    {
      headerName: '待检查',
      field: 'needsReview',
      cellRenderer: CustomCheckbox,
      suppressRowClickSelection: true // 可选：点击复选框时不触发行选中
    },
    // 其他列定义...
  ],
  // 其他Grid配置...
};

补充：基于 onRowSelected 的判断方式（AG Grid 27+ 支持） #

如果仍想使用 onRowSelected 事件，可通过事件对象的 trigger 属性区分触发源：

onRowSelected: (event) => {
  if (event.trigger === 'checkbox') {
    // 仅处理复选框触发的行选中逻辑
    console.log(`复选框触发行选中状态变更: ${event.node.selected}`);
  }
}

内容的提问来源于stack exchange，提问作者LostMohican