Ag Grid Cell 渲染器图标不可点击 React [英] Ag Grid Cell Renderer Icons are not Clickable React

问题描述

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

从'react'导入反应功能动作渲染器(参数){常量编辑重定向 = (e) =>{console.log("点击");}返回 (
<span class="actionIcons 编辑图标"><i onClick={editRedirect} class="fas fa-edit" href="/details"></i></span></div>)}导出默认 ActionRenderer

当我创建我的 AgGrid 组件时，我还定义了一个 onRowClicked 事件.

 <AgGridReactcolumnDefs={columnDefs}defaultColDef={{ 宽度:160 }}行数据={行数据}框架组件={框架组件}onRowClicked={rowClicked}></AgGridReact>

因此，我的图标不可点击，但它们下方的行是可点击的.如何使图标可单击，但如果在图标之外单击一行，则 rowClicked 函数运行?换句话说，行点击覆盖了我的图标点击，我要改变它.

const frameworkComponents = {//buttonRenderer: ButtonRenderer,进度条渲染器:进度条渲染器，动作渲染器:动作渲染器，}常量 columnDefs = [{headerName: '全名',字段:'名称'，unSortIcon:真，可排序:真，过滤器:真，锁定位置:真，},{headerName: '动作',字段:'动作'，宽度:140，锁定位置:真，cellRenderer: 'actionRenderer',},]

解决方案

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

I have a simple cell renderer that returns an icon:

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

When I create my AgGrid component, I also defined a onRowClicked event.

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

As a result, my icons are not clickable, but the row below them is. How do I make it so that the icons are clickable, but if a row is clicked outside of the icons, then the rowClicked function runs? In other words, the row click is overriding my icon click, and I was to change that.

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

解决方案

Try using button tag instead for span and icon inside button you can remove background using css.

这篇关于Ag Grid Cell 渲染器图标不可点击 React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！