AG Grid React 的 onRowSelected 事件可通过 event.source === 'checkboxSelected' 精准区分复选框触发的选中/取消操作，避免与键盘或鼠标点击整行导致的选中混淆，实现对复选框状态变更的可靠监听。
ag grid react 的 `onrowselected` 事件可通过 `event.source === 'checkboxselected'` 精准区分复选框触发的选中/取消操作，避免与键盘或鼠标点击整行导致的选中混淆，实现对复选框状态变更的可靠监听。
在 AG Grid React 中，当启用行复选框（通过 rowSelection="multiple" 和 checkboxSelection: true 配置）时，用户常需监听“仅由复选框触发”的选中状态变化，而非整行点击、键盘空格键或 API 调用等其他方式引发的选中行为。虽然 onRowSelected 事件会响应所有选中变更，但它在事件对象中提供了关键属性 source，可准确识别触发来源。
✅ 核心方案：利用 event.source 判断触发源
event.source 是一个字符串值，常见取值包括：
- 'checkboxSelected' —— 用户点击复选框触发（即目标行为）
- 'rowSelected' —— 用户点击行任意位置（非复选框区域）
- 'keyboard' —— 键盘操作（如空格键）
- 'api' —— 通过 api.selectNode() 等 API 调用触发
因此，只需在 onRowSelected 回调中校验该字段即可精准过滤：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
import { useCallback } from 'react';
const onRowSelected = useCallback((event: RowSelectedEvent) => {
// 仅响应复选框操作
if (event.source !== 'checkboxSelected') return;
const isSelected = event.node.isSelected();
const rowData = event.node.data;
console.log(`Checkbox ${isSelected ? 'checked' : 'unchecked'} for row:`, rowData);
// ✅ 在此处执行业务逻辑：如更新本地状态、触发 API、同步表单等
// 例如：updateInspectionStatus(rowData.id, isSelected);
}, []);
? 配置要点（确保复选框可用）
在 gridOptions 或
<aggridreact rowselection="multiple" checkboxselection="{true}"> params.data?.allowInspection === true}
onRowSelected={onRowSelected}
/* 其他配置... */
/></aggridreact>
⚠️ 注意事项
- event.source 是 AG Grid v28+ 的稳定特性，旧版本（v27 及更早）可能返回 undefined 或不一致值，建议升级至最新 LTS 版本；
- 不要依赖 event.api.getSelectedRows() 在回调内立即获取最新选中项——因事件为异步触发，应优先使用 event.node.isSelected() 获取当前节点状态；
- 若需响应“批量勾选”（如全选/反选），同样适用该逻辑，source 值仍为 'checkboxSelected'；
- 如需同时支持“点击行选中 + 复选框独立操作”，请勿禁用 rowSelection，而是通过 suppressRowClickSelection={true} 禁用整行点击选中，强制用户仅通过复选框操作（按需选用）。
通过这一轻量、原生且无需额外封装的方式，你即可在 AG Grid React 中实现高精度、低耦合的复选框状态监听，显著提升数据校验与交互反馈的可靠性。
