Ag Grid Cell 渲染器图标不可点击 React答案

【问题标题】：Ag Grid Cell Renderer Icons are not Clickable ReactAg Grid Cell 渲染器图标不可点击 React
【发布时间】：2020-08-13 01:25:00
【问题描述】：

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

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',
    },
  ]

【问题讨论】：

你能发布你的 columnDef 吗？好像你没有扩展 Component.在这里查看示例 - ag-grid.com/javascript-grid-cell-rendering-components/…
@PratikBhat 完成！谢谢你看看。我认为当你按照我的方式定义它时，你不需要扩展它（不是作为一个类，而是作为一个函数）。不过我可能错了。
在这里查看我的答案stackoverflow.com/questions/53327329/…。虽然是为了角度，但本质是一样的。如果您希望图标可点击，则它需要是一个特殊组件
@PratikBhat 您在回答中说要使用 cellRenderer。这基本上就是我正在做的事情。单元格渲染器返回一个简单的图标。我不太明白我当前的代码与您的建议有何不同。
您错过了细节 - 但是，如果您希望您的图标响应事件或执行操作，那么您应该考虑实现一个单元格渲染器组件ag-grid.com/javascript-grid-cell-rendering-components/…

标签： reactjs onclick icons ag-grid ag-grid-react

【解决方案1】：

以下对我有用：

 columnDefs=[
    {
          headerName: 'Actions',
          field: 'ACTION',
          sortable: true,
          filter: true,
          resizable: true,
          cellRenderer: function (params) {
            return '<span title="Edit" ><i class="fas fa-pencil-alt edit" data-action-type="edit"></i> <span title="Delete" ><i class="fas fa-trash delete" data-action-type="delete"></i></span>';
          },
    ]


    <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; 
             }  
         }
   
      }
     }

【讨论】：

【解决方案2】：

尝试使用按钮标签代替按钮内的跨度和图标，您可以使用 css 删除背景。

【讨论】：