Question

我正在创建一个react本机应用程序并使用firebase来验证我的用户凭据，如下所示:(已编辑以包含更多代码）。

import React, { Component } from 'react';
import { Text, View, Button, TextInput, Alert } from 'react-native';
import { firebaseRef } from '../config/firebase';

 class register extends Component {
    constructor(props) {
    super(props);
    this.state = {firstName: '', lastName:'', email: '', password: '', confirmPassword: '', success: true};
    this.register = this.register.bind(this); //grants access to the state objects
}

 redirect(){
    this.props.navigation.navigate('home');
 }

register(){
  firebaseRef.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then(function(user) {
  Alert.alert('Congratulations', 'You have successfully registered your email address');
}, 
  function(error) {
    Alert.alert('Registration Failed', 'failure');
    console.log(error.code);
    console.log(error.message);
    this.redirect();
  });
}

 failedRegistration(){
  Alert.alert('Registration Failed', 'failure');
  this.setState({success: false});
 }

 successfulRegistration(){
  Alert.alert('Well Done', 'You have successfully registered.');
 }

 render() {
    return (
      <View style={{backgroundColor:'cyan', flex:1, alignItems: 'center', justifyContent: 'center'}}>
      <TextInput
            style={{backgroundColor:'orange', width: 200}}
            returnKeyType='next'
            placeholder='first name'
            onChangeText={(input) => this.setState({firstName: input})}
            value={this.props.input}
            />
      <TextInput
          style={{backgroundColor:'orange', width: 200}}
          returnKeyType='next'
          placeholder='last name'
          onChangeText={(input) => this.setState({lastName: input})}
          value={this.props.input}
          />
      <TextInput
          style={{backgroundColor:'orange', width: 200}}
          returnKeyType='next'
          placeholder='email'
          onChangeText={(input) => this.setState({email: input})}
          value={this.props.input}
          />
      <TextInput
            style={{backgroundColor:'orange', width: 200}}
            returnKeyType='next'
            placeholder='password'
            onChangeText={(input) => this.setState({password: input})}
            value={this.props.input}
            />
      <TextInput
          style={{backgroundColor:'orange', width: 200}}
          returnKeyType='next'
          placeholder='password'
          onChangeText={(input) => this.setState({confirmPassword: input})}
          value={this.props.input}
          />
          <Text>{this.state.firstName}</Text>
          <Text>{this.state.lastName}</Text>
          <Text>{this.state.email}</Text>
          <Text>{this.state.password}</Text>
          <Text>{this.state.confirmPassword}</Text>
        <Button title={'REGISTER'} onPress={() => this.register()}></Button>
      </View>
    )
  }

}

导出默认寄存器; 如果我调用像this.redirect（）这样的方法，则返回错误'this.redirect不是函数'。

任何帮助都会非常感谢，提前谢谢。

Answer 1

解决此问题的一种方法：将其存储在另一个变量中并使用它来调用该函数。

register(){
  var that = this;
  firebaseRef.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then(function(user) {
  Alert.alert('Congratulations', 'You have successfully registered your email address');
}, 
  function(error) {
    Alert.alert('Registration Failed', 'failure');
    console.log(error.code);
    console.log(error.message);
    that.redirect();
  });
}

您也可以按以下方式绑定该功能

<Button title={'REGISTER'} onPress={this.register.bind(this)}></Button>

调用一个方法来重定向内部反应本机异步函数，是否可能？

1 个答案: