score:3

Accepted answer

you can simply use es6 and pass an arrow function expression that simply invokes the function you want and binds the function with this automatically..

in react-data-grid, you would have to do something like below:

<reactdatagrid
    columns={this._columns}
    rowgetter={this.rowgetter}
    rowscount={this._rows.length}
    minheight={300}
    getcellactions= {(column, row) => this.getcellactions(column, row)}
    state = {this.state}
/>

and your getcellactions function can be as it is:

getcellactions(column, row) {

    if(column.key === 'modify'){
        return [
            {
                icon: 'fa fa-edit',
                callback: () => this.getroledata(row.id)
            }
        ];

    }
}

the thing is that when you write: 

getcellactions= {(column,row) => this.getcellactions(column, row)}

you actually pass an anonymous function which will only be executed when triggered. i would like to add that when you write an arrow function in one line, it automatically returns that statement, except you wrap that line in curly braces and write a normal function. so, the above line works as :

getcellactions= {(column,row) => return this.getcellactions(column, row)}

so, the mantra is: return the reference, do not execute it before the trigger.

score:2

the problem why this.getroledata() is not working, is because this inside of your callback is not in the context of your component.

change your getcellactions function to an arrow function, so you have the component as context (inside a arrow function this keeps its meaning from its original context):

import react from 'react';

class mycomponent extends react.component {

    constructor(props) {
        super(props);
        this.state = {
            selectedrowid: null
        };
    }

    mycallback = (rowid) => {
        console.log(rowid);
        this.setstate({ selectedrowid: rowid });
    };

    getcellactions = (column, row, state) => {

        if(column.key === 'modify'){
            return [
                {
                    icon: 'fa fa-edit',
                    callback: () => {
                        console.log(row.id);
                        this.mycallback(row.id);
                    }
                }
            ];

        }
    }

    render() {
        // your render function...
    }
}

alternative:

bind this to getcellactions in the constructor like:

this.getcellactions = this.getcellactions.bind(this);

Related Query

More Query from same tag