Comment passer des paramètres à: cliquer dans Svelte?

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{}?

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>

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:

<button on:click={handleClick("arg1")}>My awesome button</button>

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.

<button on:click={() => handleClick("arg1", "arg2")}>
    My awesome button
</button>

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

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:

<a href="#" on:click|preventDefault={() => onDelete(projectId)}>delete</a>

function onDelete (id) {
  ...
}

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:

<a href="#" on:click={event => onDelete(event)}>delete</a>

function onDelete (event) {
  // if it's a custom event you can get the properties passed to it:
  const customEventData = event.detail

  // if you want the element, you guessed it:
  const targetElement = event.target
  ...
}

Je l'ai fait travailler avec ceci:

<a href="#" on:click|preventDefault={onDelete.bind(this, project_id)}>delete</a>

function onDelete(id) {
}

Le voici avec une méthode anti-rebond et un argument d'événement:

<input type="text" on:keydown={event => onKeyDown(event)} />


const onKeyDown = debounce(handleInput, 250);

async function handleInput(event){
    console.log(event);
}

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.

const handleClick = (parameter) => () => {
   // actual function
} 

Et dans le HTML

<button on:click={handleClick('parameter1')>
   It works...
</button>

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

const handleParameter1Click = () => handleClick('parameter1');

2) Si la valeur est dynamique mais disponible dans le composant, cela pourrait toujours être géré avec une fonction autonome:

let parameter1;
const handleParameter1Click = () => handleClick(parameter1);

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.