我有一个渲染AgGrid的组件。我将rowCount更新为该组件的状态,但是,我需要从显示该组件的容器中访问该数字(状态)
这是我的状态
class ClientOrderHistory extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: createColumnDefs(props.OrderHistoryReducer.columnDefs),
gridAPI: null,
displayedCount: 0
};
}
onGridReady,我更新了该功能以计算行数
onGridReady = params => {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.setState({ gridAPI: params.api, columnAPI: params.columnApi });
this.columnApi.autoSizeAllColumns();
this.setState({displayedCount: this.gridApi.getDisplayedRowCount()});
console.log('rowsCount', this.gridApi.getDisplayedRowCount());
};
我可以验证它是否正常运行,因为我可以在componentDidUpdate上进行console.log状态记录,并在控制台中正确显示行数。我正在将此组件传递到另一个容器以显示此网格,但是,我想将此displayCount状态作为文本输出到容器中。
我怎样才能做到最好?
答案 0 :(得分:5)
您应该在容器中使用onGridReady
并将其作为道具传递给AgGrid组件。这就是我的使用方式。
否则,您可以将回调函数作为道具传递给AgGrid组件,并在执行onGridReady
时在AgGrid组件上调用:
onGridReady = params => {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.setState({ gridAPI: params.api, columnAPI: params.columnApi });
this.columnApi.autoSizeAllColumns();
this.setState({displayedCount: this.gridApi.getDisplayedRowCount()});
// your callback fn as prop
if (this.props.callback) {
this.props.callback(this.gridApi.getDisplayedRowCount());
}
};
在您的容器上
callback = (rowCount) => // do stuff here