React中Ag-Grid绑定多事件时，onCellEditingStopped无法获取选区

问题原因 #

当同时绑定onRangeSelectionChanged、onCellEditingStarted和onCellEditingStopped时，Ag-Grid内部事件触发顺序会导致onCellEditingStopped的执行时机早于选区状态的最终同步。编辑停止时，组件内部尚未完成选区状态的更新，因此调用api.getCellRanges()[0]会返回undefined，尽管视觉上选区仍处于高亮状态。

可行解决方案 #

方案1：缓存选区状态 #

在onRangeSelectionChanged中实时缓存当前选区，在onCellEditingStopped里直接使用缓存值，避开状态同步延迟问题。

import { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

const MyGrid = () => {
  const [selectedRange, setSelectedRange] = useState(null);

  const handleRangeSelectionChanged = (params) => {
    const currentRanges = params.api.getCellRanges();
    setSelectedRange(currentRanges[0] || null);
  };

  const handleCellEditingStarted = (params) => {
    // 你的编辑开始逻辑
  };

  const handleCellEditingStopped = (params) => {
    // 使用缓存的选区
    if (selectedRange) {
      console.log("当前选中范围:", selectedRange);
      // 执行你的业务逻辑
    }
  };

  const columnDefs = [/* 你的列定义 */];
  const rowData = [/* 你的行数据 */];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        enableRangeSelection={true}
        editable={true}
        onRangeSelectionChanged={handleRangeSelectionChanged}
        onCellEditingStarted={handleCellEditingStarted}
        onCellEditingStopped={handleCellEditingStopped}
      />
    </div>
  );
};

export default MyGrid;

方案2：延迟获取选区 #

利用setTimeout将选区获取逻辑放入下一个事件循环，等待Ag-Grid完成内部状态更新后再执行。

const handleCellEditingStopped = (params) => {
  setTimeout(() => {
    const range = params.api.getCellRanges()[0];
    if (range) {
      console.log("当前选中范围:", range);
      // 执行你的业务逻辑
    }
  }, 0);
};

方案3：检查编辑模式配置 #

确保Ag-Grid配置中，编辑模式没有干扰选区状态。比如确认enableRangeSelection设为true，且自定义编辑组件未修改选区行为。

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