调用从Reactjs

Question

一个函数内的组件功能我有一个布局这样的组件：

var Entry = React.createClass({ 
    // executes code on a button press. 

    onButtonClick: function (event) { 
     // (do stuff) 
    }, 

    // generates the entry list with a button and some info. 

    render: function() { 
     var entryList= this.props.data.map(function(entry) { 
      // (convert timestamp into relative time, add some tags etc) 
      return (
       <p> entry.information </p> 
       <a onClick={onButtonClick} className="btn right" id={entry.link}> 
        go 
       </a> 
      ); 
     }); 

     // returns the html of the component 

     return (
      <div className="entryList"> 
       {entryList} 
      </div> 
     ); 
    } 
}); 

我希望能够从entryList变量中在渲染运行函数onButtonClick功能，但我似乎无法弄清楚如何做到这一点。当运行它时，控制台说onButtonClick没有被定义。

Uncaught ReferenceError: onButtonClick is not defined 

如何“逃避”功能？我认为这是this.props.data.map(function(items) {});问题是什么复杂的，因为我可以，如果我移动的按钮这样

 // returns the html of the component 

     return (
      <div className="entryList"> 
       <a onClick={this.onButtonClick} className="btn right">go</a> 
       {entryList} 
      </div> 
     ); 
    } 
}); 

感谢您的帮助就好了上网了！

Answer 1

的原因，您的代码不工作，你期望它的方式是因为匿名函数内上下文this变化传递给map。 map采用可选的第二个参数，该参数表示回调将使用的值this。因此，只需将this作为第二个参数添加到map即可解决您的问题。

var entryList = this.props.data.map(function(entry) { 
    ... 
}, this); 

开发谁使用ES2015还可以使用箭头功能来自动绑定的this正确的上下文。

var entryList = this.props.data.map(entry => { 
    ... 
}); 

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

上下文更改。所以你可以做到这一点。

var Entry = React.createClass({ 
    // executes code on a button press. 

    onButtonClick: function (event) { 
     // (do stuff) 
    }, 

    // generates the entry list with a button and some info. 

    render: function() { 
     var self = this; 
     var entryList= this.props.data.map(function(entry) { 
      // (convert timestamp into relative time, add some tags etc) 
      return (
       <p> entry.information </p> 
       <a onClick={self.onButtonClick} className="btn right" id={entry.link}> 
        go 
       </a> 
      ); 
     }); 

     // returns the html of the component 

     return (
      <div className="entryList"> 
       {entryList} 
      </div> 
     ); 
    } 
}); 

或者干脆

var Entry = React.createClass({ 
    // executes code on a button press. 

    onButtonClick: function (event) { 
     // (do stuff) 
    }, 

    // generates the entry list with a button and some info. 

    render: function() { 
     var entryList= this.props.data.map(function(entry) { 
      // (convert timestamp into relative time, add some tags etc) 
      return (
       <p> entry.information </p> 
       <a onClick={this.onButtonClick} className="btn right" id={entry.link}> 
        go 
       </a> 
      ); 
     },this); 

     // returns the html of the component 

     return (
      <div className="entryList"> 
       {entryList} 
      </div> 
     ); 
    } 
});