AG Grid React 的 onRowSelected 事件可通过 event.source === 'checkboxSelected' 精准区分复选框触发的选择操作，避免与鼠标点击行导致的选中混淆，实现对勾选/取消勾选行为的独立响应。
ag grid react 的 `onrowselected` 事件可通过 `event.source === 'checkboxselected'` 精准区分复选框触发的选择操作，避免与鼠标点击行导致的选中混淆，实现对勾选/取消勾选行为的独立响应。
在 AG Grid React 中，启用行复选框（通过 rowSelection: 'multiple' 和 checkboxSelection: true）后，用户既可通过点击复选框，也可通过点击整行来改变选中状态。但二者语义不同：前者明确表达“用户主动勾选/取消勾选”，后者常用于浏览或快捷选中。若业务逻辑仅需响应复选框本身的变更（例如触发校验、更新待办状态），直接监听 onRowSelected 并不足够——因为它对所有选中变化统一触发。
幸运的是，AG Grid 在 onRowSelected 事件对象中提供了 source 字段，用于标识选中操作的触发来源。当且仅当用户点击复选框时，event.source 的值为 'checkboxSelected'；而通过点击行、键盘操作（如空格键）、API 调用（如 node.setSelected()）等其他方式触发时，该值分别为 'rowSelected'、'keyboard'、'api' 等。这为我们提供了可靠的判断依据。
以下是一个典型实现示例：
import React, { useCallback } from 'react';
import { AgGridReact } from '@ag-grid-community/react';
const MyGrid = () => {
const onRowSelected = useCallback((event: any) => {
// 仅当事件由复选框触发时执行业务逻辑
if (event.source === 'checkboxSelected') {
const isSelected = event.node.isSelected();
const rowData = event.node.data;
console.log(`复选框${isSelected ? '已勾选' : '已取消'}，数据：`, rowData);
// ✅ 此处可安全调用 API、更新状态、触发校验等
// 例如：updateInspectionStatus(rowData.id, isSelected);
}
}, []);
return (
<AgGridReact
rowSelection="multiple"
checkboxSelection={true}
onRowSelected={onRowSelected}
// 其他配置...
/>
);
};
export default MyGrid;⚠️ 注意事项：
- event.source 是 AG Grid 内置字段，无需额外配置，但要求 AG Grid 版本 ≥ v28（推荐使用 v30+），旧版本可能未完全支持该字段；
- 不要依赖 event.api.getSelectedRows() 或 event.api.getSelectedNodes() 在事件回调中立即获取最新状态——event.node.isSelected() 更准确、更及时；
- 若启用了 headerCheckboxSelection（全选复选框），其触发的批量操作同样会以 'checkboxSelected' 作为 source，逻辑一致适用；
- 避免在 onRowSelected 中频繁调用 api.refreshCells() 等重绘方法，以免引发性能问题；建议将状态变更合并后批量处理。
总结：无需引入额外事件监听器或 DOM 操作，AG Grid 原生的 onRowSelected 结合 event.source 即可优雅、可靠地实现“仅响应复选框变更”的需求。这是官方推荐的最佳实践，兼具简洁性与健壮性。
