web-dev-qa-db-fra.com

Comment utiliser l'événement onClick sur Link: ReactJS?

Dans le routeur React, j'ai les attributs to et onClick comme indiqué ci-dessous

<li key={i}><Link to="/about" onClick={() => props.selectName(name)}>{name}</Link></li>

state = {
    selectedName: ''
};

selectName = (name) => {
   setTimeout(function(){this.setState({selectedName:name});}.bind(this),1000);
   // this.setState({selectedName: name});
}
  • L'attribut to permet d'accéder à environ Route 
  • onClick attribue une valeur à la variable d'état selectedName qui sera affichée lors de la navigation vers la page À propos de.

Lorsque je donne une fonction temporisée insérée appelée au clic, sa navigation vers une nouvelle page et après un certain temps est mise à jour, ce qui entraîne l'affichage du nom précédent jusqu'à ce que l'état soit mis à jour avec le nouveau nom. 

Existe-t-il un moyen de naviguer sur le nouvel itinéraire uniquement après l'exécution du code dans la fonction onClick?.

Vous pouvez obtenir le code complet [ici]. ( https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js )

reactjsreact-router
8
Pushkal Boganatham

Une solution possible consiste à utiliser history.Push au lieu d'utiliser Link pour modifier l'itinéraire dynamiquement. Pour ce faire, supprimez le composant Link et définissez l'événement onClick sur li. Maintenant, commencez par exécuter toute la tâche à l'intérieur de la fonction onClick et à la fin utilisez history.Push pour changer le moyen de navigation afin de naviguer sur une autre page. 

Dans votre cas, changez le routeur dans la fonction de rappel setState pour vous assurer que cela ne se produira qu'après le changement d'état.

Écris-le comme ceci:

<li key={i} onClick={() => props.selectName(name)}> {name} </li>

selectName = (name) => {
    this.setState({ selectedName:name }, () => {
        this.props.history.Push('about');
    });
}

Cochez cette réponse pour:

Quand utiliser callState callback

Comment naviguer dynamiquement en utilisant react router dom

8
Mayank Shukla

Alternativement, je recommanderais d'utiliser URL Params afin de capturer le nom de la personne qui fait l'objet de la page à propos. Ainsi, au lieu d'url/about et du nom en coulisse, ce serait/about/tom ou/about/pushkal. Pour ce faire, définissez les paramètres dans le routeur d'URL comme tels dans votre index.js:

<Route path="/about/:name" component={AboutPage}>

Maintenant, lorsque vous créez un lien vers la page à propos, vous le feriez comme tel:

<Link to={"/about/" + name}>{name}</Link>

Désormais, dans votre composant AboutPage, vous pouvez accéder au nom param en tant qu’application dans this.props.params.name. Vous pouvez regarder plus d'exemples ici .

Cette méthode est un peu différente de votre approche actuelle, mais je pense que cela facilitera la conception par la suite.

1
Rohan Varma