Comment utiliser l'événement onClick sur le composant react Link ?

Question

J'utilise le composant Link du routeur reactjs et je n'arrive pas à faire fonctionner le onClickevent. Voici le code :

<Link to={this.props.myroute} onClick='hello()'>Here</Link>

Est-ce la bonne façon de procéder ou une autre ?

Answer 1

Vous passez hello() comme une chaîne de caractères, également hello() signifie exécuter hello immédiatement.

essayez

onClick={hello}

Answer 2

Vous devriez utiliser ceci :

<Link to={this.props.myroute} onClick={hello}>Here</Link>

Ou (si la méthode hello lays à cette classe) :

<Link to={this.props.myroute} onClick={this.hello}>Here</Link>

Mise à jour : Pour les versions ES6 et ultérieures, si vous voulez lier un paramètre avec la méthode click, vous pouvez utiliser ceci :

    const someValue = 'some';  
....  
    <Link to={this.props.myroute} onClick={() => hello(someValue)}>Here</Link>

Answer 3

Je ne pense pas que ce soit un bon modèle à utiliser en général. Link exécutera votre événement onClick et naviguera ensuite vers l'itinéraire, il y aura donc un léger retard dans la navigation vers le nouvel itinéraire. Une meilleure stratégie consiste à naviguer vers la nouvelle route avec l'accessoire 'to' comme vous l'avez fait, et dans la fonction componentDidMount() du nouveau composant, vous pouvez lancer votre fonction hello ou toute autre fonction. Vous obtiendrez le même résultat, mais avec une transition beaucoup plus douce entre les routes.

Pour le contexte, j'ai remarqué cela en mettant à jour mon magasin redux avec un événement onClick sur Link comme vous l'avez ici, et cela a causé un retard de ~.3 secondes sur l'écran blanc avant de monter le composant de la nouvelle route. Il n'y avait pas d'appel api impliqué, donc j'ai été surpris que le délai soit si important. Cependant, si vous vous contentez de consigner 'hello' dans la console, le délai peut ne pas être perceptible.