Question

我实施了一个登录页面，直到我升级为react-native。

我遇到的问题是没有调用onPress道具：

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

这是我的signIn功能：

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

单击按钮时，按下按钮似乎被按下，但日志语句未触发。

Answer 1

尝试这样称呼：

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

它看起来像＆＃34;这个＆＃34;在你的函数中绑定到了错误的范围。

Answer 2

你也可以这样做：

MkNote

其余代码不需要更改。

Answer 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 只会在初始化时绑定到组件一次。

TouchableHighlight onPress无法正常工作

3 个答案: