調用從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> 
     ); 
    } 
});