TouchableHighlight onPress 不起作用答案

【问题标题】：TouchableHighlight onPress not workingTouchableHighlight onPress 不起作用
【发布时间】：2015-11-29 22:20:23
【问题描述】：

我实现了一个登录页面，该页面在我升级 react-native 之前一直有效。

我遇到的问题是 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();  },

当我单击登录按钮时，它似乎被按下，但日志语句没有触发。

【问题讨论】：

这不是 Touchable 按钮的问题，您遇到了调用函数时未使用的上下文。

标签： react-native

【解决方案1】：

试着这样称呼它：

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

您的函数中的“this”似乎绑定到了错误的范围。

【讨论】：

我喜欢这种方法。另外值得注意的是，我的代码有 this.signIn 没有 ()。它也可以在没有箭头功能的情况下工作。
我遇到了类似的问题：滚动列表时，我的 onPress 在滚动列表中被自动调用。添加箭头功能修复它！
你救了我的命。使用速记函数来避免 signIn 有自己的范围是非常棒的。不错！

【解决方案2】：

你也可以这样做：

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

其余代码无需更改。

【讨论】：

最好在render函数外绑定。

【解决方案3】：

另外，如果你不想使用 bind 并且因为我们使用的是 ES6 语法，你可以将你的函数写成一个 const 和箭头函数（在你的组件中）而不是一个函数，例如：

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

那么您仍然可以在组件中调用它，而无需在构造函数或其他任何地方进行绑定：

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

这应该保持“this”的上下文一致，因为 signIn 在初始化时只会绑定到组件一次。

【讨论】：

顺便说一句，这三种方法都有效。似乎是一个偏好问题。