How to handle event function inside object attribute?

Question

Hello I'm using bootstrap-table for a web app where I need to transition to another url when a table row is clicked. "On row click" events are handled through an object attribute called onRowClick where you assign it a function which takes the row data as argument.

onRowClick : Function

Assign a callback function which will be called after a row click. This function taking one argument: row which is the row data which you click on.

class SystemTable extends React.Component {
constructor() {
    super();

    this.state = {
        data: sampleSystems
    }
}

displaySystemInfo(row) {
    const systemId = row._id;
    this.context.router.transitionTo(`/system/${systemId}`);
    //browserHistory.push(`/system/${systemId}`);
}

render() {
    function osName(cell, row) {
      return cell.name;
    }

    function batteryCondition(cell, row) {
      return cell.condition;
    }

    var selectRowProp = {
      mode: "checkbox", 
      bgColor: "rgb(204, 230, 255)"
    };  

    var tableOptions = {
        sizePerPage: 5,
        deleteText: "✗ Delete Selected",
        paginationSize: 3,
        clearSearch: true,
        hideSizePerPage: true,
        onRowClick: function(row) {
            // here
        }
    };

    return (
    <BootstrapTable 
        className="react-bs-table"
        data={this.state.data.systems}
        striped={true}
        hover={true}
        pagination={true}
        selectRow={selectRowProp}
        deleteRow={true}
        multiColumnSearch={true}
        search={true}
        ignoreSinglePage={true}
        options={tableOptions}
        >
        <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" 
          searchable={false}>ID</TableHeaderColumn>
        <TableHeaderColumn dataField="serialnumber" dataAlign="center"
           searchable={false}>Serial Number</TableHeaderColumn>
        <TableHeaderColumn dataField="model" dataAlign="center" 
          dataSort={true}>Model</TableHeaderColumn>
        <TableHeaderColumn dataField="os" dataAlign="center" dataSort={true} 
          dataFormat={osName} filterValue={osName}>OS</TableHeaderColumn>
        <TableHeaderColumn dataField="battery" dataAlign="center" dataSort={true} 
          dataFormat={batteryCondition} filterValue={batteryCondition}>
          Battery Condition</TableHeaderColumn>
    </BootstrapTable>
    )
}

SystemTable.contextTypes = {
    router: React.PropTypes.object
}

export default SystemTable;

What I want to be able to do is call a function like this:

displaySystemInfo(row, event) {
    event.preventDefault();
    const systemId = row._id;
    this.context.router.transitionTo(`/system/${systemId}`)
}

inside:

 onRowClick: function(row) {

 }

I've been trying to do it like this:

onRowClick: function(row) {
    (e) => this.displaySystemInfo(row, e);
}

but it doesn't work, I'm sorry if its a simple fix but I just don't know how to handle the event inside the onRowClick attribute. Any help is appreciated, thanks!

EDIT

Forgot to mention what I mean by "it doesn't work", I get the following warning:

warning Expected an assignment or function call and instead saw an expression no-unused-expressions

and nothing occurs on click.

score 0 · Answer 1 · answered Nov 04 '16 at 15:17

0

Have you tried:

onRowClick: function(row) {
    retrun displaySystemInfo(row, e);
}

answered Nov 04 '16 at 15:17

thooyork

475
1
4
8

I get the following error: `error 'e' is not defined no-undef` Which is what I don't know how or where to do, defining the event. – Tuco Nov 04 '16 at 15:22

RacheleM · Accepted Answer · 2016-11-08T20:14:50.743

0

Why do you need an e.preventDefault? It should just be

onRowClick: this.displaySystemInfo

or

onRowClick: function(row) {
    const systemId = row._id;
    this.context.router.transitionTo(`/system/${systemId}`)
}

onRowClick passes the row data automatically, but the click handler in the TableRow source doesn't doesn't provide a hook for grabbing and manipulating click event information directly.

edited Nov 08 '16 at 20:14

answered Nov 04 '16 at 19:53

RacheleM

46
1
5

Whenever I try this: `onRowClick: displaySystemInfo`, I get: `error 'displaySystemInfo' is not defined`. I'll edit the post with the entire file. – Tuco Nov 04 '16 at 20:02
Oh, I see. I thought you were declaring displaySystemInfo as a const inside render. In the class declaration like that, call it as _this_.displaySystemInfo – RacheleM Nov 08 '16 at 19:54
You were right, the event variable isn't needed but I had to use ES6 arrow function: `onRowClick: row => { const systemId = row._id; this.context.router.transitionTo(`/system/${systemId}`); }` – Tuco Nov 15 '16 at 20:38

How to handle event function inside object attribute?

2 Answers2