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

Posted 2023-02-22

【中文标题】如何处理对象属性内的事件函数？

【英文标题】：How to handle event function inside object attribute?

【发布时间】：2017-03-18 11:31:37

【问题描述】：

您好，我正在将 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

点击后什么也没有发生。

【参考方案1】：

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

onRowClick: this.displaySystemInfo

或

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

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

【讨论】：

每当我尝试这个：onRowClick: displaySystemInfo，我得到：error 'displaySystemInfo' is not defined。我将使用整个文件编辑帖子。

哦，我明白了。我以为您将 displaySystemInfo 声明为 const 内部渲染。在这样的类声明中，将其称为 this.displaySystemInfo

你说得对，不需要事件变量，但我必须使用 ES6 箭头函数：onRowClick: row => const systemId = row._id; this.context.router.transitionTo(/system/$systemId);

【参考方案2】：

你试过了吗：

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

【讨论】：

我收到以下错误：error 'e' is not defined no-undef 这是我不知道如何或在哪里做的，定义事件。