web-dev-qa-db-fra.com

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

J'utilise le composant Link du routeur reactjs et je ne parviens pas à faire fonctionner onClickevent. C'est le code:

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

Est-ce la façon de le faire ou une autre manière?

reactjsreact-routerreact-redux
43
bier hier

Vous transmettez hello() sous forme de chaîne. hello() signifie également exécuter hello immédiatement.

essayer

onClick={hello}
82
CodinCat

Vous devriez utiliser ceci:

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

Ou (si la méthode hello est dans cette classe):

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

pdate: Pour ES6 et les dernières si vous souhaitez lier des paramètres avec la méthode click, vous pouvez utiliser ceci:

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

Je ne crois pas que ce soit un bon modèle à utiliser en général. Link exécutera votre événement onClick, puis naviguera jusqu'à l'itinéraire. Un léger délai sera alors nécessaire pour naviguer vers le nouvel itinéraire. Une meilleure stratégie consiste à naviguer vers le nouvel itinéraire avec l'accessoire 'to' comme vous l'avez fait, et dans la fonction composantDidMount () du nouveau composant, vous pouvez activer votre fonction hello ou toute autre fonction. Vous obtiendrez le même résultat, mais avec une transition beaucoup plus douce entre les itinéraires.

Pour le contexte, je l’ai remarqué lors de la mise à jour de mon magasin Redux avec un événement onClick sur Link comme vous l’avez fait ici, ce qui a entraîné un délai de ~ 0,3 seconde d’écran blanc-blanc avant le montage du composant du nouvel itinéraire. Il n'y avait aucun appel d'api impliqué, donc j'ai été surpris que le retard était si grand. Cependant, si vous vous contentez de vous connecter à la console 'bonjour', le délai peut ne pas être perceptible.

9
Nunchucks