Question

我试图从一个集成在其父级中的子类调用一个事件处理程序，但是处理程序没有被调用，我也没有收到任何错误消息。

var Home = React.createClass({

        handleClick: function(tableRowId, e) {
            console.log("##Clicked##", tableRowId);
        }

        render : function () {
            var tableRows = Data.map(function (tableRow) {

                    if (SelLines[tableRow.ID]) {
                        return (
                             <Tr>
                            // ...
                             <Td className = "cellSelected" column = "ACTION">  
                             // ## This doesnt call the handler
                             <a onClick = {this.handleClick.bind(this, tableRow.ID)}> {tableRow.ACTION} </ a>  <  / Td >

                             <  / Tr > )
                    } else {
                        return (
                            //...
                    };
                });
            return (
                 < div >
                 < div >
                 // ## This does work and call the handler
                 <a onClick={this.handleClick.bind(this, 1234)}> Test </a>
                 < Table className = "table" id = "table" >
                     {tableRows}
                 <  / Table >
                 <  / div >
                 <  / div > );

        }
    });

Answer 1

在地图功能中，this不再引用您的组件，因此您的处理程序失败。

您有两种解决方案：

使用ES6 arrow function来避免这种情况，并将其作为对组件的引用，如下所示：Data.map((tableRow) => {。但是，这需要您通过babelify编译代码以使其与当前浏览器兼容。
另一种解决方案是在地图功能之前声明var c = this，然后在函数中使用c代替this。这样你就可以确定你实际上正在使用该组件。

Answer 2

问题是this中的Data.map没有引用React组件。您还需要将this的React组件绑定到Data.map函数的回调。

更新：因为很难执行绑定2级。这是获取React组件的this的简单方法。

render : function(){
  var that = this;
  ...Data.map(function(){ that.handle...})
   ....
}

React - 来自var in render function

2 个答案: