[英]Angular ag-Grid: how to refresh param value in custom cell renderer that is passed from the parent component?
[英]Update State of React Component from ag-grid Custom Renderer
我需要从Ag-grid的自定义渲染组件更新React组件的状态。 我曾尝试在自定义组件中使用setState(),但它说setState()不是函数
// function to act as a class //https://www.ag-grid.com/javascript-grid-cell-rendering-components/ function editCellRenderer () {} // gets called once before the renderer is used editCellRenderer.prototype.init = function(params) { // create the cell this.eGui = document.createElement('div'); let row = params.data; let className = 'edit-btn-style'; this.eGui.innerHTML = '<span class="my-css-class"><div class="edit-button '+className+'" title="'+row.id+'">\\ <a target="_blank" href="URL='+row.id+'" >\\ <i class="fa fa-edit fa-1x not-selectable-element"></i></a></div> </span>'; }; // gets called once when grid ready to insert the element editCellRenderer.prototype.getGui = function() { return this.eGui; }; // gets called whenever the user gets the cell to refresh editCellRenderer.prototype.refresh = function(params) { // set value into cell again // return true to tell the grid we refreshed successfully return true; }; // gets called when the cell is removed from the grid editCellRenderer.prototype.destroy = function() { // do cleanup, remove event listener from button }; //This is the way i am initializing AgGridReact in Reactjs component. <AgGridReact columnDefs={this.state.columnDefs} defaultColDef={this.state.defaultColDef} rowData={jobs_reindexed} components={this.state.components} frameworkComponents={this.state.frameworkComponents} onGridReady={this.onGridReady} />
可以在网格选项中传递上下文属性。 然后,您可以从单元格渲染器调用父方法。
https://www.ag-grid.com/javascript-grid-context/
它看起来像这样:
class ParentComponent extends Component {
constructor(props) {
super(props)
this.state = {
columnDefs: [
{
headerName: '-',
field: '',
cellRendererFramework: CustomBtn
}
],
}
this.handleStateChange = this.handleStateChange.bind(this)
}
handleStateChange(data) {
/**
* setState...
*/
}
/**
* onGridReady..., onCellClicked etc.
*/
render() {
return (
<div>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.props.rowData}
onGridReady={this.onGridReady}
onCellClicked={this.handleOnCellClicked}
gridOptions={{
context: { componentParent: this }
}}
/>
</div>
)
}
}
export default ParentComponent;
const CustomBtn = (props) => {
const handleClick = (e) => {
e.stopPropagation();
props.context.componentParent.handleStateChange(props.data);
};
return (
<div>
<button onClick={handleClick}>
Change State
</button>
</div>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.