如何处理对象属性内的事件函数

How to handle event function inside object attribute?

本文关键字:属性 事件 函数 对象 何处理 处理      更新时间:2023-09-26

你好,我使用bootstrap-table的web应用程序,我需要过渡到另一个url时,一个表行被点击。"On row click"事件是通过一个对象属性onRowClick来处理的,在这个对象属性中,你可以为它分配一个函数,该函数将行数据作为参数。

onRowClick: Function

指定一个回调函数,该函数将在行单击后调用。这个函数有一个参数: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属性。任何帮助都很感激,谢谢!

编辑

忘记提及我所说的"it doesn't work"是什么意思了,我得到了以下警告:

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

,点击什么也没发生

为什么需要一个e.p preventdefault ?应该是

onRowClick: this.displaySystemInfo

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

onRowClick自动传递行数据,但是tableow源中的单击处理程序不提供直接抓取和操作单击事件信息的钩子。

你试过了吗:

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