0

您好，我正在将 bootstrap-table 用于 Web 应用程序，当单击表行时，我需要转换到另一个 url。“行点击”事件是通过一个名为 onRowClick 的对象属性处理的，您可以在其中为其分配一个函数，该函数将行数据作为参数。

onRowClick : 函数

分配一个回调函数，该函数将在单击行后调用。此函数采用一个参数： row 是您单击的行数据。

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;

我想要做的是调用这样的函数：

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

里面：

 onRowClick: function(row) {

 }

我一直在尝试这样做：

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

但它不起作用，如果它是一个简单的修复，我很抱歉，但我只是不知道如何处理 onRowClick 属性中的事件。任何帮助表示赞赏，谢谢！

编辑

忘了提及“它不起作用”的意思，我收到以下警告：

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

点击时没有任何反应。

4

2 回答 2

0

你有没有尝试过：

onRowClick: function(row) {
    retrun displaySystemInfo(row, e);
}
于 2016-11-04T15:17:12.770 回答
0

为什么需要 e.preventDefault？它应该只是

onRowClick: this.displaySystemInfo

或者

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

onRowClick 自动传递行数据，但 TableRow 源中的单击处理程序没有提供直接获取和操作单击事件信息的挂钩。

于 2016-11-04T19:53:42.420 回答