How to pass parameters to on:click in Svelte?

Question

TL;DR

Just wrap the handler function in another function. For elegancy, use arrow function.

---

You have to use a function declaration and then call the handler with arguments. Arrow function are elegant and good for this scenario.

WHY do I need another function wrapper?

If you would use just the handler and pass the parameters, how would it look like?

Probably something like this:

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

But remember, handleClick("arg1") this is how you invoke the function instantly, and that is exactly what is happening when you put it this way, it will be called when the execution reaches this line, and not as expected, ON BUTTON CLICK...

Therefore, you need a function declaration, which will be invoked only by the click event and inside it you call your handler with as many arguments as you want.

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

As @Rich Harris (the author of Svelte) pointed out in the comments above: This is not a hack, but is what the documentation shows also in their tutorials: https://svelte.dev/tutorial/inline-handlers

Rich has answered this in a comment, so credit to him, but the way to bind parameters in a click handler is as follows:

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

To provide some extra detail for people who also struggle with this, and it should be in the docs if it isn't, you can also get the click event in such a handler:

<a href="#" on:click={event => onDelete(event)}>delete</a>
<script>
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
  ...
}
</script>

Svelte docs/tutorial: inline handlers

I got it working with this:

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

function onDelete(id) {
}

There is no clear way mentioned in the documentation and your solution will work but is indeed not very elegant. My own preferred solution is to use currying in the script block itself.

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

And in the HTML

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

Beware of currying

As mentioned in the comments, currying has its pitfalls. The most common one that in the above example handleClick('parameter1') will not be fired when clicking but rather on rendering, returning a function that in turn will be fired onclick. This means that this function will always use 'parameter1' as it's argument.

Therefore using this method would only be safe if the used parameter is a constant of some kind and will not change once it's rendered.

This would bring me to another point:

1) If it's a constant used a parameter, you could as well use a seperate function

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

2) If the value is dynamic but available within the component, this could still be handled with a standalone function:

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

3) If the value is dynamic but not available from the component because this is dependent on some kind of scope (eg: a list of items rendered in a #each block) the 'hacky' approach will work better. However I think it would be better to in that case have the list-elements as a component themselves and fall back to case #2

To conclude: currying will work under certain circumstance but is not recommended unless you are very well aware and careful about how to use it.

Here it is with a debounce method and event argument:

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


const onKeyDown = debounce(handleInput, 250);

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