v28.1.0版本中单元格渲染器内组件无法触发rowEditingStopped事件

问题核心 #

升级到AG Grid v28.1.0，把原有的frameworkComponents配置换成component后，cellRenderer内部事件触发时，onRowEditingStopped事件不再触发——旧版本中该事件能正常响应。

原因分析 #

v28+版本对组件注册机制做了调整，component属性渲染的组件和Grid编辑状态的绑定逻辑，和旧的frameworkComponents存在差异，组件内部的事件无法自动触发Grid的编辑停止流程，导致onRowEditingStopped未被唤起。

解决方案 #

手动调用Grid的API终止编辑流程，强制触发onRowEditingStopped事件：

1. 在cellRenderer组件的事件处理函数中，通过params.api调用stopEditing()方法，确保Grid的编辑状态被正确终止。
2. 示例代码（以ActionsRenderer为例）：

import React from 'react';

const ActionsRenderer = (params) => {
  const handleSave = () => {
    // 先执行你的业务逻辑，比如提交数据
    // 手动触发Grid停止编辑
    params.api.stopEditing();
  };

  return (
    <button onClick={handleSave}>保存</button>
  );
};

export default ActionsRenderer;

3. 额外检查点：
   • 确保列配置中editable属性设置为true，Grid才会识别该列为可编辑状态
   • 如果是输入框失焦这类交互触发停止编辑，同样可以在对应事件中调用params.api.stopEditing()

补充说明 #

若需要在停止编辑时控制是否保留编辑内容，可使用stopEditing(cancel)方法：cancel传true表示取消编辑（丢弃内容），传false表示确认编辑（保留内容），Grid会根据参数触发对应后续逻辑。

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