如何编写监听复选框选中状态的AG Grid React单元格渲染器

要实现自定义单元格渲染器根据行复选框的选中状态渲染不同内容，你可以通过以下步骤完成：

1. 编写自定义单元格渲染器组件 #

利用AG Grid提供的API监听行选中状态变化，同步更新组件内部状态：

import React, { useEffect, useState } from 'react';

const TestCell = (params) => {
  // 用当前行的选中状态初始化组件状态
  const [isRowSelected, setIsRowSelected] = useState(params.node.selected);

  useEffect(() => {
    // 处理选中状态变化的回调函数
    const handleSelectionChange = () => {
      setIsRowSelected(params.node.selected);
    };

    // 监听AG Grid的选中状态变化事件
    params.api.addEventListener('selectionChanged', handleSelectionChange);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      params.api.removeEventListener('selectionChanged', handleSelectionChange);
    };
  }, [params.api, params.node]);

  // 根据选中状态渲染1或0
  return <span>{isRowSelected ? 1 : 0}</span>;
};

export default TestCell;

2. 在列配置中使用该渲染器 #

将自定义渲染器绑定到目标列上（结合你提供的配置）：

const columnDefs = [
  {
    field: "test",
    headerName: "Test",
    checkboxSelection: true,
    cellRenderer: TestCell,
  },
  // 可添加其他列配置
];

关键逻辑说明 #

• params.node.selected：直接获取当前行的选中状态，用于初始化组件的初始值
• selectionChanged事件：AG Grid在行选中/取消选中时触发的全局事件，通过监听它可以实时同步行选中状态到组件内部
• 清理监听：在组件卸载时移除事件监听，避免不必要的内存占用

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