如何在Ag-Grid中实现右键点击行时自动选中对应行

Ag-Grid 默认不会在触发右键上下文菜单时自动切换行选中状态，上下文菜单的操作默认读取Grid实例当前记录的选中行集合，因此会出现操作作用在历史选中行、而非当前右键目标行的问题，可通过以下两种方式解决：

方案1：内置属性配置（推荐，v28及以上版本通用，社区/企业版均支持） #

直接在AgGridReact组件上添加核心配置项即可，无需额外编写事件逻辑：

<AgGridReact
  // 原有行选中配置，根据业务场景选择单选/多选
  rowSelection="single" 
  // 核心配置：右键触发上下文菜单时自动选中当前右键行
  selectRowsOnContextMenu={true}
  // 多选场景可选配置：右键选中时保留其他已选行，仅追加当前行到选中集合
  // selectRowsOnContextMenuFilter={null}

  {/* 其余原有业务配置 */}
/>

开启该配置后，右键点击任意行会先完成行选中逻辑，再弹出上下文菜单，后续菜单操作读取的选中行即为当前右键目标行。

方案2：低版本兼容手动实现（适用于v28以下版本） #

若使用的Ag-Grid版本低于v28，无上述内置属性，可通过绑定行右键事件手动实现选中逻辑：

import { useCallback } from 'react';

const GridPage = () => {
  const handleRowContextMenu = useCallback((params) => {
    const currentRowNode = params.node;
    // 单选场景：直接选中当前行，清空其他已选项
    currentRowNode.setSelected(true);
    // 多选场景：传第二个参数为true，保留其他已选项，追加选中当前行
    // currentRowNode.setSelected(true, true);
  }, []);

  return (
    <AgGridReact
      rowSelection="single"
      onRowContextMenu={handleRowContextMenu}
      {/* 其余原有业务配置 */}
    />
  )
}

排查注意点：如果自定义了上下文菜单的getContextMenuItems逻辑，不要在回调中提前执行清空选中的操作，菜单执行逻辑中通过params.api.getSelectedNodes()获取到的即为当前右键选中的目标行。

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