es6箭頭函數，沒有得到在React應用程序參數值

您好我一直在嘗試在我的React應用程序中將值傳遞給es6箭頭函數，但目前爲止尚未成功。下面是我在做什麼es6箭頭函數，沒有得到在React應用程序參數值

var data = []; 
for (var i=1; i<=5; i++) { 
    data.push(<li><a href="#" onClick={(e) => this.getData(e, i)} >{i}</a></li>); 
}

和代碼的getData是

getData (e, page){ 
e.preventDefault(); 
//here I am calling an api to get data as per page params 
}

，但實際上，當點擊發生了，我什麼也得不到。任何幫助！

來源

2017-05-08 h_a86

刪除括號 - '的onClick =（E）=> this.getTicketsPage（E，I）' – Weedoze

Arrow功能和'this'？箭頭函數沒有'this'綁定。 'this'將是第一個包含非箭頭函數的上下文。 – Tushar

是的，嘗試沒有括號。 http://exploringjs.com/es6/ch_arrow-functions.html – Jankapunkt

我測試過這段代碼。它工作正常 - 當我點擊一個鏈接時調用getData方法。

您只需將var更改爲let即可獲得正確的參數值i param。

var data = []; 
for (let i=1; i<=5; i++) { 
    data.push(<li><a href="#" onClick={(e) => this.getData(e, i)} >{i}</a></li>); 
}

來源

2017-05-08 08:36:37

不應該更改任何內容，let和var基本相同。另外我認爲'var'和'let'混合並不好＃ – gisderdube

@gisderdube var讓我們有不同的作用域。 –

是真實的，但在這種情況下，我沒有看到哪裏會有所作爲。 – gisderdube

試試這個：

var data = []; 
for (var i=1; i<=5; i++) { 
    data.push(<li><a href="#" onClick={this.getData.bind(this, i)}>{i} 
    </a></li>); 
}

這裏是一個工作示例：http://jsbin.com/lokafas/edit?html,js,console,output

順便說一句，我還建議使用let和const當您使用ES6語法反正。

來源

2017-05-08 08:28:35 gisderdube

沒有工作... –

嗯...你能提供全班嗎？你在使用React.createClass（）或ES6類嗎？嘗試在getData中記錄參數並提供結果 – gisderdube

爲了讓您的代碼正常工作，您必須在某處綁定this。最好的辦法是做它在構造函數中：

export default class SomeCoolName extends React.Component { 

    constructor() { 
     super(); 
     this.getData = this.getData.bind(this); // this is important! 
    } 

    getData(e, page) { 
     // code 
    } 


    // somewhere in the code, in render() maybe 
    var data = []; 
    for (var i=1; i<=5; i++) { 
     data.push(<li><a href="#" onClick={(e) => this.getData(e, i)} >{i}</a></li>); 
    } 

}

來源

2017-05-08 08:44:11 kaytrance

仍然錯誤vals。 –

有沒有辦法通過這種方式傳遞在這裏與參數'onClick = {this.getData.bind（this，i）}'''''''''''''我得到了正確的價值我內getData函數 –

但無法通過e –

es6箭頭函數，沒有得到在React應用程序參數值

回答

相關問題