2015-11-29 85 views
15

我實現了一個登錄頁面,這個頁面一直工作到我升級了react-native。TouchableHighlight onPress不起作用

我遇到的問題是,onPress道具不被稱爲:

<TouchableHighlight style={styles.button} 
     underlayColor='#f1c40f' 
     onPress={this.signIn}> 
    <Text style={styles.buttonText}>Sign In</Text> 
</TouchableHighlight> 

這裏是我的簽到功能:

signIn: function(){ 
console.log("SignInAction signIn") 
this.fetchData(); }, 

的簽到按鈕似乎是鬱悶的時候我點擊它,但日誌語句不會觸發。

回答

30

嘗試調用它像這樣:

onPress={() => this.signIn() }> 

它看起來像「本」在你的函數被綁定到錯誤的範圍。

+1

我喜歡這種方法。另外值得注意的是,我的代碼在沒有()的情況下有this.signIn。它也沒有箭頭功能。 – lernerbot

+0

我有一個類似的問題:滾動列表時,我的onPress在滾動列表中自動調用。添加箭頭功能解決了它! –

+0

你救了我的命。使用簡寫函數來避免signIn有其自己的範圍,這很棒。太好了! –

5

你也可以做這樣的:

onPress={this.signIn.bind(this)}> 

的代碼的其餘部分不需要改變。

2

另外,如果你不想使用綁定因爲我們正在使用ES6語法,你可以寫你出指定爲常量(您的組件內)的功能,而不是一個功能如:

signIn =() => { 
    // code here 
} 

那麼你仍然可以調用它的組件就像你已經是內無需構造或其他地方中的綁定:

<TouchableHighlight style={styles.button} 
     underlayColor='#f1c40f' 
     onPress={this.signIn}> 
    <Text style={styles.buttonText}>Sign In</Text> 
</TouchableHighlight> 

這應該保持的「這一」一致方面,因爲簽到將被綁定到零件只有一次初始化。

+0

順便說一句,這三種方法都是有效的。似乎是一個偏好問題。 –