0
votes

Comment rediriger Retour à l'application avec réact.js à partir d'un composant?

Je suis nouvel apprenant de réact.js et je ne trouve pas la bonne solution. J'ai le composant CreateUser et lorsqu'un succès client à la création d'une personne que je souhaite rediriger le client sur une application ... J'en ai besoin pour arriver dans cette fonction du composant CreateUser xxx pré>

à la fin de la fonction à l'instruction IF forte> p>

application: P>

import React, { Component } from 'react';
import { UserDataService } from '../services/UserData.service';

interface IState {
    username:string;
    userEmail:string;
    password:string;
    confirmPassword:string;
}

export class CreateUser extends Component <{}, IState> { 

    isAlertVisible: boolean = true;
    myUserDateService = new UserDataService();

    constructor(props: {}, myUserDateService:UserDataService){
        super(props );
        this.state = {
            username:"",
            password:"",
            confirmPassword:"",
            userEmail:"",
        }
    }

    private handleSubmit(e:any){

        e.preventDefault();
        this.setState({
            username: this.state.username,
            password: this.state.password,
            confirmPassword: this.state.confirmPassword,
            userEmail: this.state.userEmail
        })
        this.passConfrim();
        if (this.isAlertVisible){
            console.log(this.state)
            this.myUserDateService.create(this.state);
        }
    }

    passConfrim(){
        if(this.state.password !== this.state.confirmPassword){
            this.isAlertVisible = false;
        }else{
            this.isAlertVisible = true;
        } 
    } 

    render() {

        return (
            <div className="form-group">
                <h1>Create User</h1>
                <form onSubmit={e => this.handleSubmit(e)}>
                    <label >Username</label>
                    <input className="form-control" type="text" placeholder='Enter Username...' onChange={e => this.setState({username : e.target.value})} required/>
                    <br/>
                    <label >Email</label>
                    <input className="form-control" type="text" placeholder='Enter your email...' onChange={e => this.setState({userEmail : e.target.value})} required/>
                    <br/>
                    <label >Passowrd</label>
                    <input className="form-control" type="password" placeholder='Enter Password...' onChange={e => this.setState({password : e.target.value})} required/>
                    <br/>
                    <label >Confirm Passowrd</label>
                    <input className="form-control" type="password" placeholder='Confirm Password...' onChange={e => this.setState({confirmPassword : e.target.value })} required />
                    <div style={{color: "red", textAlign: "left"}} hidden={this.isAlertVisible}>**password not match</div>
                    <br/>
                    <button className="btn btn-primary" type="submit" >Create User</button>
                </form >
            </div>

        )
    }
}

export default CreateUser;


0 commentaires

3 Réponses :


0
votes

Vous pouvez utiliser history.push ('/ YourRoute') et cela vous mènera à n'importe quel itinéraire de votre cœur si désire


5 commentaires

J'ai essayé cette solution mais j'ai eu cette erreur: Erreur: appel de crochet non valide. Les crochets ne peuvent être appelés qu'à l'intérieur du corps d'une composante fonction. Cela pourrait se produire pour l'une des raisons suivantes: 1. Vous pourriez avoir une inadéquation de versions de réaction et le rendu (tel que réagissant DOM) 2. Vous pouvez enfreindre les règles des crochets 3. Vous pourriez avoir plus d'une copie de réagir dans la même application


Avez-vous vérifié toutes ces choses?


Qu'est-ce que tu veux dire toutes ces choses? Je suis nouveau avec réaction si vous pouvez m'aider que ce sera merveilleux. J'ai posté mon code si vous pouvez vérifier ce que je fais mal ...


Vous devez regarder le message d'erreur et voir si vous enfreignez l'une des règles. I.e. Utilisez-vous des crochets dans le bon endroit? utilisez-vous une version de réaction? Vos versions de réagir / réacteur correspondent-elles?


J'appelle à utiliserHistory dans un composant réacteur ... L'erreur peut-être de ceci ... mais je cherche un moyen d'utiliser - utilisez-moi pour changer de chemin après le succès du client Création d'un nouvel utilisateur



0
votes

Étant donné que vous extension du composant utilisateur à partir de réagir, il s'agit d'un composant de classe et vous ne pouvez pas utiliser les crochets «UTILISATION» à l'intérieur.

Vous passez également l'historique comme un accessoire au routeur, pouvez-vous essayer le code ci-dessous pour Naviguer et laissez-moi savoir. xxx


0 commentaires

0
votes

Fondamentalement, vous n'avez pas besoin de passer l'historique avec le routeur, vous pouvez utiliser un composant à haute commande avec le routeur de réacteur. Importer avec le composant CreateUser - https://reacttraining.com/react-router/core/ API / WITROUTER

this.props.history.push('/your-route');


0 commentaires