IT技术 - Ag Grid 单元格渲染器图标不可点击 React - 吾爱随笔录

我有一个简单的单元格渲染器，它返回一个图标：

import React from 'react'
function ActionRenderer(params) {
  const editRedirect = (e) =>{
    console.log("Clicked");
  }
  return (
    <div>
      <span class="actionIcons editIcon">
        <i onClick={editRedirect} class="fas fa-edit" href="/details"></i>
      </span>
    </div>
  )
}
export default ActionRenderer

在创建 AgGrid 组件时，我还定义了一个onRowClicked事件。

 <AgGridReact
        columnDefs={columnDefs}
        defaultColDef={{ width: 160 }}
        rowData={rowData}
        frameworkComponents={frameworkComponents}
        onRowClicked={rowClicked}
      ></AgGridReact>

结果，我的图标不可点击，但它们下方的行是可点击的。如何使图标可点击，但如果在图标外点击一行，则该rowClicked功能运行？换句话说，行点击覆盖了我的图标点击，我要改变它。

const frameworkComponents = {
    //  buttonRenderer: ButtonRenderer,
    progressBarRenderer: ProgressBarRenderer,
    actionRenderer: ActionRenderer,
  }

  const columnDefs = [
    {
      headerName: 'Full Name',
      field: 'name',
      unSortIcon: true,
      sortable: true,
      filter: true,
      lockPosition: true,
    },
    {
      headerName: 'Actions',
      field: 'actions',
      width: 140,
      lockPosition: true,
      cellRenderer: 'actionRenderer',
    },
  ]

columnDefs=[ { headerName: 'Actions', field: 'ACTION', sortable: true, filter: true, resizable: true, cellRenderer: function (params) { return ' '; }, ] <ag-grid-angular [pagination]="true" [paginationPageSize]="15" [rowData]="rowDataBlackList" [columnDefs]="columnBlackList" class="ag-theme-material" style="height: 500px" (cellClicked)="onCellClicked($event)" #agGrid > </ag-grid-angular>

onCellClicked($event) { if($event.column.getColId()=='ACTION') { let actionType = $event.event.target.getAttribute("data-action-type"); switch(actionType) { case "edit": { console.log("Edit action clicked"); break; } case "delete": { console.log("Delete action clicked"); break; } } } }