ag grid react 提供 onrowselected 事件配合 event.source === 'checkboxselected' 判断，可精准区分用户通过复选框触发的选择操作与键盘/点击行触发的其他选择行为，实现仅响应复选框勾选/取消的业务逻辑。
ag grid react 提供 onrowselected 事件配合 event.source === 'checkboxselected' 判断，可精准区分用户通过复选框触发的选择操作与键盘/点击行触发的其他选择行为，实现仅响应复选框勾选/取消的业务逻辑。
在 AG Grid React 中，启用行复选框（如通过 rowSelection="multiple" 和 checkboxSelection={true}）后，所有行都会显示复选框。但默认情况下，onRowSelected 事件会响应任何导致行选中状态变化的行为——包括点击复选框、点击整行、按空格键、甚至调用 API（如 api.selectAll()）。这使得无法直接判断用户意图：到底是主动勾选了复选框，还是单纯点了某一行？
幸运的是，AG Grid 在 onRowSelected 事件对象中提供了关键属性 source，它明确标识了选中状态变更的触发来源。当且仅当用户通过复选框交互（鼠标点击或回车确认）改变选中状态时，event.source 的值为字符串 'checkboxSelected'；其他方式（如点击行、键盘导航、API 调用）则对应不同值（如 'uiSelect'、'api' 等）。
因此，实现“仅响应复选框变更”的核心逻辑如下：
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
import { useCallback } from 'react';
import { AgGridReact } from '@ag-grid-community/react';
const MyGrid = () => {
const onRowSelected = useCallback((event: RowSelectedEvent) => {
// ✅ 关键判断：仅处理由复选框触发的变更
if (event.source === 'checkboxSelected') {
const isSelected = event.node.isSelected();
console.log(`复选框被${isSelected ? '勾选' : '取消'}，行数据：`, event.data);
// ? 在此处执行你的业务逻辑
// 例如：更新本地选中状态、触发 API 请求、高亮待检项等
handleCheckboxToggle(event.node, isSelected);
}
}, []);
const handleCheckboxToggle = (node: IRowNode, selected: boolean) => {
// 示例：同步到自定义选中状态管理（如 useState）
// 或提交至后端标记“需进一步检查”
};
return (
<AgGridReact
rowSelection="multiple"
checkboxSelection={true}
onRowSelected={onRowSelected}
// 其他配置...
/>
);
};⚠️ 注意事项：
- event.source 是 AG Grid v28+ 的稳定特性，旧版本（v27 及更早）可能返回 undefined 或不一致值，建议升级至最新 LTS 版本；
- 不要依赖 event.node.selected，而应始终调用 event.node.isSelected() 方法获取实时准确状态；
- 若启用了 suppressRowClickSelection={true}，可进一步避免点击行误触发 onRowSelected，使复选框成为唯一 UI 选择入口；
- 对于全选/取消全选（selectAll() / deselectAll()），source 值为 'api'，不会匹配 'checkboxSelected'，符合预期隔离逻辑。
总结：无需额外封装复选框或监听 DOM 事件，AG Grid 原生 onRowSelected + event.source 就是官方推荐、轻量且可靠的解决方案。它既保持框架一致性，又确保逻辑清晰可维护——真正做到了“一次配置，精准响应”。
