我有一个简单的单元格渲染器,它返回一个图标:
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创建AgGrid组件时,我还定义了一个 onRowClicked 事件.
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>因此,我的图标不可单击,但它们下面的行是可单击的.如何使图标可单击,但是如果在图标外部单击一行,则会运行 rowClicked 函数?换句话说,行点击将覆盖我的图标点击,而我是要更改它.
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', }, ] 推荐答案尝试使用按钮标签代替按钮中的跨度和图标,您可以使用css删除背景.
Try using button tag instead for span and icon inside button you can remove background using css.
更多推荐
Ag Grid单元格渲染器图标不可点击
发布评论