Réagir Natif de l'Appel d'une fonction

Je suis nouveau sur react-native mais ont été jouer avec la création d'une simple INTERFACE utilisateur de connexion. J'ai un composant Login et puis séparer les deux composants de formulaire pour loginForm et forgotPasswordForm.

Sur mon Composant Login, j'ai un renderForm fonction qui est d'essayer de déterminer si nous devons montrer que loginForm ou la forgotPasswordForm, qui, je suppose, serait basé sur state.

Composant Login:

export default class Login extends Component {
  state = { 'display': '' };

  //Render the content
  renderForm(){
    //What page should show?
    switch(this.state.display){
      case 'forgotPasswordForm':
        return <ForgotPassword />;
      break;
      case 'loginForm':
        return <LoginForm />;
      break;
      default:
        return <LoginForm />;
      break;
    }
  }

  render() {
    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>

        <View style={styles.logoContainer}>
          <Image
            style={styles.logo}
            source={require('../../images/logo.png')}
          />
          <Text style={styles.logoText}>Behavior Tracking System</Text>
        </View>

        <View style={styles.formContainer}>
          {this.renderForm()}
        </View>

      </KeyboardAvoidingView>
    );
  }
}

Voici mon LoginForm qui contient un lien vers le forgotPasswordFunction:

export default class LoginForm extends Component {

  forgotPasswordForm(){
    //Thought I could setState here so that the loginComponent would update and see the state and render the forgotPasswordForm instead
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          barStyle="light-content"
        />
        <TextInput
          placeholder="username or email"
          placeholderTextColor="rgba(255,255,255,0.7)"
          returnKeyType="next"
          onSubmitEditing={() => this.passwordInput.focus()}
          keyboardType="email-address"
          autoCapitalize="none"
          autoCorrect={false}
          style={styles.input}
        />
        <TextInput
          placeholder="password"
          placeholderTextColor="rgba(255,255,255,0.7)"
          secureTextEntry={true}
          returnKeyType="go"
          style={styles.input}
          ref={(input) => this.passwordInput = input}
        />
        <TouchableOpacity style={styles.buttonContainer}>
          <Text style={styles.buttonText}>LOGIN</Text>
        </TouchableOpacity>
        <View style={styles.forgotPasswordContainer}>
          <Text style={styles.forgotPasswordText}>Trouble logging in? </Text>
          <TouchableOpacity onPress={this.forgotPasswordForm()}>
            <Text style={styles.activeLink}>Click Here.</Text>
          </TouchableOpacity>
        </View>
      </View>

    );
  }
}

J'ai peut-être juste un peu confuse où une partie de ce code doit être placé. Je suppose que depuis le LoginComponent est y compris les champs du formulaire lui-même, c'est là que je voudrais mettre le commutateur logique pour déterminer si nous montrons la loginForm ou forgotPasswordForm.

Ma question est la onClick dans le loginForm pour le lien mot de passe oublié. Pas entièrement sûr de savoir comment obtenir que de mettre à jour le composant login pour passer formes.

Réagir Natif de l'Appel d'une fonction

Mon but est que lorsque le lien "Cliquez Ici" est pressé, il charge la Récupération de Mot de passe Champ au lieu de les champs de connexion.

InformationsquelleAutor SBB | 2017-01-13

react-native

Fondamentalement, vous avez besoin de créer une fonction qui va mettre à jour l'état du composant parent et le transmettre à l'enfant. Maintenant, si vous appelez this.props.forgotPasswordForm() à l'intérieur de votre LoginForm composant, il mettra à jour l'état de la mère et de rendre le mot de passe oublié composant à la place.

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      display: 'loginForm' 
    }; //this is how  you set up state
  }

  //Render the content
  renderForm = () => {
    //What page should show?
    switch(this.state.display){
      case 'forgotPasswordForm':
        return <ForgotPassword />;
      break;
      case 'loginForm':
        return <LoginForm forgotPasswordForm={this.forgotPasswordForm} />; //pass method to child
      break;
      default:
        return <LoginForm forgotPasswordForm={this.forgotPasswordForm} />;
      break;
    }
  }
  //Create a function that will update the state in parent
  forgotPasswordForm = () => {
    this.setState({ display: 'forgotPasswordForm' });
  }

  render() {
    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>

        <View style={styles.logoContainer}>
          <Image
            style={styles.logo}
            source={require('../../images/logo.png')}
          />
          <Text style={styles.logoText}>Behavior Tracking System</Text>
        </View>

        <View style={styles.formContainer}>
          {this.renderForm()}
        </View>

      </KeyboardAvoidingView>
    );
  }

Merci pour la réponse - après avoir fait ces changements, je reçois le message d'erreur suivant: "Avertissement: setState(...): Impossible de mettre à jour au cours de la transition d'état (comme dans render ou à un autre composant du constructeur)". La page par défaut le mot de passe oublié formulaire de login. Peut-être que j'ai raté quelque chose d'autre?
J'ai modifié l'affichage de "loginForm" dans ce.de l'état, aussi vous faire toutes les modifications que j'ai fait? J'ai aussi changé la façon dont vous créez les fonctions de renderForm() {} pour renderForm = () => {}
Oh que l'erreur est parce que vous l'avez appelé ce.forgotPasswordForm() dans votre onPress, il faut juste être onPress={this.props.forgotPasswordForm}
Ah, c'était ça, merci beaucoup!

InformationsquelleAutor Matt Aft

Vous devez vous connecter pour publier un commentaire.