使用 react-bootstrap-table onRowClick 无需重新加载页面即可过渡到新的 url

Question

你好，我想知道这里是否有人知道如何做这样的事情：

changeURL(event, row) {
    event.preventDefault();
    const itemId = row._id;
    this.context.router.transitionTo(`/item/${itemId}`)
}

在 react-bootstrap-table onRowClick 函数中：

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

    function showBatteryCondition(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="model" dataAlign="center" 
            dataSort={true}>Model</TableHeaderColumn>
          <TableHeaderColumn dataField="serialnumber" dataAlign="center"
            searchable={false}>Serial Number</TableHeaderColumn>
          <TableHeaderColumn dataField="os" dataAlign="center" dataSort={true} 
            dataFormat={showOSName}>OS</TableHeaderColumn>
          <TableHeaderColumn dataField="battery" dataAlign="center" dataSort={true} 
            dataFormat={showBatteryCondition}>Battery Condition</TableHeaderColumn>
        </BootstrapTable>
    )
}

编辑

有没有办法做这样的事情：

(e) => this.changeURL(row, e);

里面：

onRowClick: function(row) {

}

我不太确定如何处理对象属性内的事件。

Answer 1

最终使用 ES6 箭头函数来绕过它：

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

不需要这个活动。

使用 react-bootstrap-table onRowClick 无需重新加载页面即可过渡到新的 url

Transition to new url without reloading page with react-bootstrap-table onRowClick

javascript

reactjs

react-bootstrap-table