我想在时间列定义中为reactjs中的ag-grid表列添加一个按钮。而onclick我需要调用一个类函数。 我想创建onclick事件,并将params值传递给函数,然后从那里进行api调用。
columnDefs = [{
..... {
headerName: "View",
field: "id",
sortable: false,
filter: false,
colId: "view",
cellRendererFramework: function(params) {
return <Button onclick = {
this.handleClick
} > Test < /Button>
},
},
......
];
}
handleClick() {
console.log("some API call and state change");
}
render() {
return ( <
div >
<
div id = "myGrid"
style = {
{
height: "100%",
width: "100%"
}
}
className = "ag-theme-material" >
<
AgGridReact enableSorting = {
true
}
groupSelectsChildren = {
true
}
rowData = {
this.state.organization
}
columnDefs = {
this.columnDefs
}
onGridReady = {
this.onGridReady
} >
<
/AgGridReact>
<
/div>
}
export default OrganizationList;
答案 0 :(得分:1)
使用cellRendererFramework而不是在列定义中使用cellRenderer,这样agGridReact就会知道您正在返回jsx元素。
例如:
colDefs = [{ ...{
headerName: "View",
field: "id",
colId: "view",
cellRendererFramework: function(params) {
return <button onClick={ this.handleClick }> Test </button>
},
},
....
}]
也不要忘记将单元格渲染器功能绑定到您的组件类构造函数,否则您将无法访问this
。