在AgGridReact

问题描述

例如在使用自己的单元格渲染器时“操作”列（其中带有链接或按钮），当您单击链接或按钮之一时，AgGridReact仍会触发onRowClicked事件。 event.stopPropagation和event.preventDefault无济于事。

// list of rowActions ...

function RowActionsRenderer(props) {
        let row = props.data;
        return <div>{
            rowActions.map((actionDef,index) =>
                <Button onClick={(event) => {
                    event.stopPropagation();
                    event.preventDefault();
                    //_processAction(actionDef,row)
                }}>{label(actionDef.name)}</Button>
            )
        }</div>;
    }

cellRenderer的定义：

// ...
columnDefs.push({
                headerName: 'actions',field: '-actions-',width: 120,sortable: false,filter: false,cellRenderer: 'rowActionsRenderer'
            });


// ...
            frameworkComponents: {
                rowActionsRenderer: RowActionsRenderer
            },

事件监听注册：

             onRowClicked={(row) => {
                        // always runs event when when clicked on button in the '-actions-' column !!!
                    }}

现在，如何在单击“ -actions-”列中的任何内容时防止调用onRowClicked？

解决方法

我想避免对AgGrid api进行一些相当复杂的低级调用。所以我建议的解决方案是：

首先，不要听行点击。

第二次收听单元格单击并过滤列ID '-actions-'

onCellClicked={(cell) => {

                                if (cell.column.getColId() === '-actions-') {
                                    return;
                                }
                                let row = cell.data;
                                // process row data ...
                                
                            }

ag-grid-react cellrenderer