La liaison d'une fonction à un bouton est simple et directe:
<button on:click={handleClick}>
Clicks are handled by the handleClick function!
</button>
Mais je ne vois pas de moyen de passer des paramètres (arguments) à la fonction, quand je fais cela:
<button on:click={handleClick("parameter1")}>
Oh no!
</button>
La fonction est appelée au chargement de la page, et plus jamais.
Est-il possible de passer des paramètres à la fonction appelée on:click{}
?
ÉDITER:
Je viens de trouver un moyen hacky de le faire. L'appel de la fonction à partir d'un gestionnaire en ligne fonctionne.
<button on:click={() => handleClick("parameter1")}>
It works...
</button>
Réponses:
TL; DR
Enveloppez simplement la fonction de gestionnaire dans une autre fonction, pour l'élégance, utilisez la fonction flèche
Vous devez utiliser une déclaration de fonction, puis appeler le gestionnaire avec des arguments. La fonction flèche est élégante et bonne pour ce scénario.
POURQUOI ai-je besoin d'un autre wrapper de fonction?
Si vous utilisiez uniquement le gestionnaire et transmettiez les paramètres, à quoi ressemblerait-il?
Probablement quelque chose comme ça:
Mais rappelez-vous,
handleClick("arg1")
c'est ainsi que vous appelez la fonction instantanément, et c'est exactement ce qui se passe lorsque vous la mettez de cette façon, elle sera appelée lorsque l'exécution atteindra cette ligne, et pas comme prévu, SUR LE BOUTON CLIC ...Par conséquent, vous avez besoin d'une déclaration de fonction, qui sera invoquée uniquement par l'événement click et à l'intérieur, vous appelez votre gestionnaire avec autant d'arguments que vous le souhaitez.
Comme @Rich Harris (l'auteur de Svelte) l'a souligné dans les commentaires ci-dessus: Ce n'est pas un hack, mais c'est ce que la documentation montre également dans leurs tutoriels: https://svelte.dev/tutorial/inline-handlers
la source
Rich a répondu à cela dans un commentaire, donc merci à lui, mais la façon de lier les paramètres dans un gestionnaire de clic est la suivante:
Pour fournir des détails supplémentaires aux personnes qui ont également des difficultés avec cela, et cela devrait être dans les documents s'il ne l'est pas, vous pouvez également obtenir l'événement click dans un tel gestionnaire:
la source
Je l'ai fait travailler avec ceci:
la source
Le voici avec une méthode anti-rebond et un argument d'événement:
la source
Il n'y a aucun moyen clair mentionné dans la documentation et votre solution fonctionnera mais n'est en effet pas très élégante. Ma propre solution préférée consiste à utiliser le curry dans le bloc de script lui-même.
Et dans le HTML
Méfiez-vous du curry
Comme mentionné dans les commentaires, le curry a ses pièges. La plus courante qui, dans l'exemple ci-dessus
handleClick('parameter1')
, ne sera pas déclenchée lors d'un clic, mais plutôt lors du rendu, renvoyant une fonction qui sera déclenchée à son tour. Cela signifie que cette fonction utilisera toujours 'parameter1' comme argument.Par conséquent, l'utilisation de cette méthode ne serait sûre que si le paramètre utilisé est une constante quelconque et ne changera pas une fois rendu.
Cela m'amènerait à un autre point:
1) Si c'est une constante utilisée un paramètre, vous pouvez aussi bien utiliser une fonction séparée
2) Si la valeur est dynamique mais disponible dans le composant, cela pourrait toujours être géré avec une fonction autonome:
3) Si la valeur est dynamique mais n'est pas disponible à partir du composant car cela dépend d'une sorte de portée (par exemple: une liste d'éléments rendus dans un bloc #each), l' approche «hacky» fonctionnera mieux. Cependant, je pense qu'il serait préférable dans ce cas d'avoir les éléments de liste en tant que composants eux-mêmes et de revenir au cas # 2
Pour conclure: le curry fonctionnera dans certaines circonstances mais n'est pas recommandé à moins que vous ne soyez très bien informé et prudent sur la façon de l'utiliser.
la source
on:click={() => handleClick('parameter1')}
)handleClick('parameter1')
c'est ce qui se passe lorsque le clic se produit , de manière incorrecte. Deuxièmement, cela signifie que le gestionnaire doit être rebondi chaque fois que les paramètres changent, qui est sous-optimal. Actuellement, il y a un bogue, ce qui signifie que cela ne fonctionne pas de toute façon svelte.dev/repl/a6c78d8de3e2461c9a44cf15b37b4dda?version=3.12.1