如何通过AG Grid API事件监听器区分单行选中/取消选中操作

首先要明确：你当前的代码存在事件源混淆的问题——你把MenuItem的SelectChangeEvent和AG Grid自身的SelectionChangedEvent绑定到了同一个处理函数里，这两个事件完全不是一回事，自然无法正确区分操作类型。

下面是两种可行的解决方案，按需选择：

方案1：区分操作类型（仅判断是批量还是单行操作） #

如果只需要区分是批量按钮触发的选择变化，还是用户手动点击单行触发的，不需要追踪具体哪一行，可以通过设置临时标志实现：

// 定义标志位标记是否是批量操作
let isBatchOperation = false;

// 单独处理批量选择菜单的点击
const handleBatchSelection = (value: string) => {
  isBatchOperation = true;
  if (value === 'selectAll') {
    api.forEachNode(node => node.setSelected(true));
  } else if (value === 'deselectAll') {
    api.forEachNode(node => node.setSelected(false));
  }
  // 延迟重置标志，确保AG Grid的selectionChanged事件触发时能识别
  setTimeout(() => {
    isBatchOperation = false;
  }, 0);
};

// 处理AG Grid自身的选择变化事件
const handleGridSelectionChanged = () => {
  if (isBatchOperation) {
    // 批量操作触发的选择变化，直接跳过单行逻辑处理
    return;
  }
  // 这里处理用户手动点击单行的选中/取消选中逻辑
  const currentSelected = api.getSelectedRows();
  console.log('单行操作后当前选中行:', currentSelected);
};

// 初始化时绑定AG Grid事件
useEffect(() => {
  if (api) {
    api.addEventListener('selectionChanged', handleGridSelectionChanged);
    return () => {
      api.removeEventListener('selectionChanged', handleGridSelectionChanged);
    };
  }
}, [api]);

// 菜单渲染部分
return (
  <>
    <MenuItem value="selectAll" onClick={() => handleBatchSelection('selectAll')}>
      Select All
    </MenuItem>
    <MenuItem value="deselectAll" onClick={() => handleBatchSelection('deselectAll')}>
      Deselect All
    </MenuItem>
  </>
);

方案2：追踪具体变化的行（获取哪一行被选中/取消） #

如果需要知道具体是哪一行发生了选中/取消操作，可以通过维护历史选中集合，对比当前选中状态来找出变化：

import { useState, useEffect } from 'react';
import { SelectionChangedEvent } from 'ag-grid-community';

// 假设你的行数据有唯一标识字段`id`，如果没有可以用AG Grid节点的`id`
const [prevSelectedIds, setPrevSelectedIds] = useState<Set<string>>(new Set());

// 单独处理批量选择菜单的点击
const handleBatchSelection = (value: string) => {
  if (value === 'selectAll') {
    api.forEachNode(node => node.setSelected(true));
  } else if (value === 'deselectAll') {
    api.forEachNode(node => node.setSelected(false));
  }
};

// 处理AG Grid自身的选择变化事件
const handleGridSelectionChanged = (event: SelectionChangedEvent) => {
  const currentSelectedRows = event.api.getSelectedRows();
  const currentSelectedIds = new Set(currentSelectedRows.map(row => row.id));

  // 找出新增的选中行ID
  const addedRows = [...currentSelectedIds].filter(id => !prevSelectedIds.has(id));
  // 找出取消选中的行ID
  const removedRows = [...prevSelectedIds].filter(id => !currentSelectedIds.has(id));

  if (addedRows.length > 0) {
    console.log('被选中的行ID:', addedRows);
    // 处理行选中逻辑
  }
  if (removedRows.length > 0) {
    console.log('被取消选中的行ID:', removedRows);
    // 处理行取消选中逻辑
  }

  // 更新历史选中集合
  setPrevSelectedIds(currentSelectedIds);
};

// 初始化时绑定AG Grid事件并加载初始选中状态
useEffect(() => {
  if (api) {
    const initialSelected = api.getSelectedRows();
    setPrevSelectedIds(new Set(initialSelected.map(row => row.id)));
    
    api.addEventListener('selectionChanged', handleGridSelectionChanged);
    return () => {
      api.removeEventListener('selectionChanged', handleGridSelectionChanged);
    };
  }
}, [api]);

// 菜单渲染部分
return (
  <>
    <MenuItem value="selectAll" onClick={() => handleBatchSelection('selectAll')}>
      Select All
    </MenuItem>
    <MenuItem value="deselectAll" onClick={() => handleBatchSelection('deselectAll')}>
      Deselect All
    </MenuItem>
  </>
);

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