React AG Grid中复选框选中/取消时触发函数的实现方案

针对你需要仅通过复选框操作触发指定函数、且点击复选框时选中单元格的需求，提供两种可行方案：

方案一：自定义复选框单元格渲染器 #

默认的agCheckboxCellRenderer没有暴露直接的点击回调，自定义渲染器可以完全控制复选框的交互逻辑：

// 自定义复选框渲染组件
const CustomCheckboxCellRenderer = (props) => {
  const handleCheckboxChange = (e) => {
    // 更新行数据的checked字段
    props.setValue(e.target.checked);
    // 触发你的自定义业务函数，传入当前行节点和选中状态
    yourCustomFunction(props.node, e.target.checked);
    
    // 选中当前单元格（视觉上高亮）
    props.api.setFocusedCell(props.node.rowIndex, props.colDef.field);
  };

  return (
    <input
      type="checkbox"
      checked={props.value}
      onChange={handleCheckboxChange}
      disabled={props.cellRendererParams?.disabled}
    />
  );
};

// 修改列定义，替换默认渲染器
const defaultLabelColumns = [
  {
    headerName: "Hide",
    field: "checked",
    cellRenderer: CustomCheckboxCellRenderer, // 使用自定义渲染器
    cellRendererParams: {
      disabled: false,
    },
    maxWidth: 70,
  },
  {
    field: "make",
    headerName: "Case #",
    maxWidth: 80,
    valueGetter: hashValueGetter,
  },
  { field: "name", headerName: "Line Name", width: 180 },
];

方案二：利用cellClicked事件判断交互元素 #

如果不想修改渲染器，可通过AG Grid的cellClicked事件捕获复选框点击：

// 定义单元格点击事件回调
const onCellClicked = useCallback((params) => {
  // 判断点击的是复选框列，且点击元素为checkbox
  if (params.colDef.field === 'checked' && params.event.target.type === 'checkbox') {
    const isChecked = params.event.target.checked;
    // 触发自定义函数
    yourCustomFunction(params.node, isChecked);
    
    // 选中当前单元格
    params.api.setFocusedCell(params.node.rowIndex, 'checked');
  }
}, [plotData]);

// 在AgGridReact组件中添加事件
<AgGridReact
  columnDefs={colDefs}
  defaultColDef={defaultColDef}
  rowData={plotData}
  rowHeight={30}
  pagination={true}
  paginationPageSize={4}
  rowSelection="multiple"
  domLayout="autoHeight"
  animateRows={true}
  onSelectionChanged={onSelectionChanged}
  onCellClicked={onCellClicked} // 添加单元格点击事件
/>

关键说明 #

• 两种方案都能绕过onSelectionChanged，仅响应复选框的点击操作
• 若需要选中行而非单元格，可在回调中添加params.node.setSelected(true)，但需注意与你现有行选逻辑的冲突
• setFocusedCell会让单元格获得焦点并显示选中样式，需确保AG Grid主题支持单元格选中的视觉反馈

内容的提问来源于stack exchange，提问作者Angel Gabriel Chable Concepcio