爲ReactRouter鏈接創建自定義onClick處理程序時出錯

我正在嘗試編寫一個門戶網站列表頁面，這是一個門戶網站表格，每個表格行都是一個到門戶網站的鏈接。現在我必須對此點擊進行一些自定義操作。我的代碼看起來喜歡 -爲ReactRouter鏈接創建自定義onClick處理程序時出錯

var React = require('react'); 
 
var Link = require('react-router').Link; 
 

 
var PortalStore = require('../../stores/portal-store'); 
 

 
var PortalLandingPage = React.createClass({ 
 
\t getInitialState: function() { 
 
     return PortalStore.getPortalList(); 
 
    }, 
 
    updateAuthorizationCookie: function (portalIdHash) { 
 
     PortalStore.setPortalIdHash(portalIdHash); 
 
     PortalStore.generateAuthToken(); 
 
     this.transitionTo('portalHome', {portalIdHash: portalIdHash}); 
 
    }, 
 
    render: function() { 
 
     var createPortalRow = function (portal) { 
 
      return (
 
       <tr key={portal.portalId}> 
 
        <td> 
 
         <Link to='portalHome' 
 
           params={{ 
 
            portalIdHash: portal.portalIdHash, 
 
            contentId: portal.portalId 
 
           }} 
 
           onClick={this.updateAuthorizationCookie(portal.portalIdHash)} 
 
         >{portal.portalName}</Link> 
 
         <b></b> 
 
         <hr align="left" width="100%"></hr> 
 
        </td> 
 
       </tr> 
 
      ); 
 
     }; 
 
\t \t return (
 
\t \t \t <table className="table"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t <tr><th> 
 
\t \t \t \t \t Name 
 
\t \t \t \t \t <b></b> 
 
\t \t \t \t \t <hr align="left" width="100%"></hr> 
 
\t \t \t \t </th></tr> 
 
\t \t \t \t </thead> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t {this.state.portalList.map(createPortalRow, this)} 
 
\t \t \t \t </tbody> 
 
\t \t \t </table> 
 
\t \t </div>); 
 
    } 
 
} 
 
module.exports = PortalLandingPage;

現在的問題是，當上述呈現組件的方法被調用，同時調用並評估onclick處理每一行。相反，我的要求是，只有當用戶點擊鏈接時纔會調用onClick處理程序。我也嘗試過，刪除處理程序周圍的括號，但它給編譯時錯誤。

<Link to='portalHome' 
 
           params={{ 
 
            portalIdHash: portal.portalIdHash, 
 
            contentId: portal.portalId 
 
           }} 
 
           onClick=this.updateAuthorizationCookie(portal.portalIdHash) 
 
         >{portal.portalName}</Link>

請建議什麼是錯我的代碼。

來源

2016-12-19 Abhijeet srivastava

您正在調用您傳遞給onClick的函數，因此當調用該事件時，它會嘗試調用該函數（未定義）的結果。您需要傳遞函數引用本身，或者因爲您使用的是箭頭函數，所以需要傳遞一個匿名函數來調用您的函數：

onClick={() => this.updateAuthorizationCookie(portal.portalIdHash)}

來源

2016-12-19 10:59:28

爲ReactRouter鏈接創建自定義onClick處理程序時出錯

回答

相關問題