每当我按下Textinput时都会调用TouchableOpacity

Question

每当我在任一文本输入字段上按一次时，登录函数就会调用

可触摸的语句：

<TouchableOpacity
     style={InputFieldStyle.submitButton}
     onPress={this.login(this.state.email, this.state.password)}>
          <Text style={InputFieldStyle.submitButtonText}>Submit Me</Text>
</TouchableOpacity>

登录功能：

login = (email, pass) => {
     alert(`Email: ${email} Password: ${pass}`);
};

This is my expo link where I'm working on Textinput

有什么办法可以阻止它，或者我在这里做错什么了？

Answer 1

login()是一个箭头函数，因此您无需bind()。实际的问题是您的onPress上的TouchableOpacity道具。该道具应该是每当按下按钮时都要调用的功能。

您不是在传递函数，而是在您的render()中调用login（）函数，并将返回值（未定义）传递给按钮。每次login()被调用时，您所看到的行为就是render()。

解决方案是更改：

<TouchableOpacity onPress={this.login(this.state.email, this.state.password)} {...otherProps}>

到

<TouchableOpacity onPress={() => {this.login(this.state.email, this.state.password)}} {...otherProps}>

Answer 2

即使接受的答案有效，也不是一个好习惯。在渲染器中绑定东西并不是一个好主意（即使可行），并且将来会使代码更难阅读。

加上，为什么您已经需要将电子邮件和密码作为参数传递呢？

这样做，您只需要复制一些数据，就可以轻松地丢失更复杂的代码。

一种更简单的解决问题的简便方法是：

/build/

Answer 3

从'react-native'导入TextInput并使用它而不是InputField并通过使用setState，当您单击Submit时，整个电子邮件和密码将仅提交一次。作为参考，请查看此https://snack.expo.io/HkmsuZ6Dm。这也将帮助您解决问题。

Answer 4

使它成为这样的箭头功能 。 onPress = {（）=> this.login（）} 。 那么只有在您按下某些按钮时它才会调用。

Answer 5

您在遇到问题 onPress={this.login(this.state.email, this.state.password)

您必须使用bind()方法并将this关键字作为第一个参数，例如onPress={this.login.bind(this, this.state.email, this.state.password)}

Read more about bind() method

但是您不必将电子邮件和密码作为参数传递，您可以直接从州访问它们

编辑您的方法，使其看起来像这样：

login = () => {
  const { email, password } = this.state;
  alert(`Email: ${email} Password: ${password}`);
}

您的可触摸对象类似于：

<TouchableOpacity onPress={this.login}>