如何解决在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 ...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。