Question

我克隆了一个反应原生的GitHub源。其中，对于登录功能，它们用于View的两个文件和功能的一个文件。

这是login.js

class Login extends Component {

 submitLogin(email, password) {
   alert('clickedLogin');
  }

render() {
return (
  <LoginView onPress={this.submitLogin.bind(this)} 
             onSignupPress={this.displaySignupView.bind(this)}/>
   )
 }
}

这是LoginView.js - ＆gt;上面的onPress和onSignupPress被发送到它并且它在这里有表单元素。

 class LoginView extends Component {
   state = {
      email: '',
      password: '',
      isAuthenticating: false,
      error: ''
     }     

  render() {
    return (
     <View>
        <TextInput
          style={[styles.input, styles.whiteFont]}
          placeholder="Email"
          placeholderTextColor="#FFF"
          underlineColorAndroid='transparent'
          onChangeText={(email) => this.setState({email})}
          value={this.state.email}/>
       <TextInput
          secureTextEntry={true}
          style={[styles.input, styles.whiteFont]}
          placeholder="Password"
          placeholderTextColor="#FFF"
          onChangeText={(password) => this.setState({password})}
          value={this.state.password}/>
      <TouchableOpacity
          style={styles.signin}
          onPress={this.props.onPress.bind(this, this.state.email, this.state.password)}>
          <Text style={styles.signinText}>Sign In</Text>
        </TouchableOpacity>
     </View>
   )
  }
 }

当登录按钮点击 submitLogin 时，系统正在调用警报，但我找不到输入方法 LoginView 中的电子邮件和密码输入到登录文件的元素，并在submitLogin中提醒它。

我该怎么做？

Answer 1

你不应该在this.props.onPress上使用bind，否则它不会引用原始的父函数，您可能想要传递的电子邮件和密码是这样的：

在LoginView.js中

：

  <TouchableOpacity
      style={styles.signin}
      onPress={()=>this.props.onPress(this.state.email,this.state.password)}>

      ...

    </TouchableOpacity>

要了解有关绑定如何工作的更多信息，我建议您阅读本文： https://www.codementor.io/niladrisekhardutta/how-to-call-apply-and-bind-in-javascript-8i1jca6jp

如何将onPress传递给自定义组件并将值返回给调用组件？

1 个答案: