Question

我需要从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}
/>

Answer 1

可以在网格选项中传递上下文属性。然后，您可以从单元格渲染器调用父方法。

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>
    );
};

从Ag-grid Custom Renderer更新React组件的状态

1 个答案: