如何在多次点击Ag-Grid同一行时触发onSelectionChanged事件？

要实现同一行点击多次都触发事件，Ag-Grid默认的onSelectionChanged无法满足需求——它只在选中状态发生变化时才会触发。你可以改用onRowClicked事件，同时手动控制选中状态来维持原有的单选行为：

1. 修改组件事件绑定 #

把原来的onSelectionChanged替换为onRowClicked：

<AgGridReact
    data-testid="details-data"
    columnDefs={DetailsColDef}
    rowData={formatDetailsData(data?.Response, false)}
    rowSelection="single"
    reactNext={true}
    defaultColDef={defaultColDef}
    onRowClicked={handleRowClicked} // 替换为行点击事件
    suppressPaginationPanel={true}
    domLayout="autoHeight"
    suppressMaxRenderedRowRestriction={true}
    rowBuffer={5}
    suppressColumnVirtualisation={false}
    debounceVerticalScrollbar={true}
    alwaysShowVerticalScroll={true}
></AgGridReact>

2. 编写行点击处理函数 #

在处理函数里手动维护单选状态，并执行你的业务逻辑：

const handleRowClicked = (params) => {
    const { api, node } = params;
    
    // 保持单选：先取消所有已选中行，再选中当前行
    api.deselectAll();
    node.setSelected(true);
    
    // 执行原有业务逻辑
    const selectedNodes = api.getSelectedNodes();
    // TODO: 这里写你原来handleChanged里的处理代码
};

补充说明 #

• onRowClicked会在每次点击行时触发，不管该行之前是否处于选中状态
• 如果你不需要维持选中状态，可以去掉api.deselectAll()和node.setSelected(true)这两行，直接执行业务逻辑即可

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