Como passar parâmetros para on: clique em Svelte?

A ligação de uma função a um botão é fácil e direta:

<button on:click={handleClick}>
    Clicks are handled by the handleClick function!
</button>

Mas não vejo uma maneira de passar parâmetros (argumentos) para a função, quando faço isso:

<button on:click={handleClick("parameter1")}>
    Oh no!
</button>

A função é chamada no carregamento da página e nunca mais.

É possível passar parâmetros para a função chamada from on:click{}?

Acabei de encontrar uma maneira hacky de fazer isso. Chamar a função de um manipulador embutido funciona.

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

TL; DR

Basta envolver a função de manipulador em outra função, para elegibilidade, use a função de seta

Você precisa usar uma declaração de função e chamar o manipulador com argumentos. As funções de seta são elegantes e boas para esse cenário.

POR QUE preciso de outro wrapper de função?

Se você usasse apenas o manipulador e passasse os parâmetros, como seria?

Provavelmente algo como isto:

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

Mas lembre-se, handleClick("arg1")é assim que você invoca a função instantaneamente, e é exatamente isso que está acontecendo quando você a coloca dessa maneira; ela será chamada quando a execução atingir essa linha, e não como o esperado, NO BOTÃO CLIQUE ...

Portanto, você precisa de uma declaração de função, que será invocada apenas pelo evento click e, dentro dele, chamará o manipulador com os argumentos que desejar.

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

Como @Rich Harris (o autor do Svelte) apontou nos comentários acima: Isso não é um hack, mas é o que a documentação mostra também em seus tutoriais: https://svelte.dev/tutorial/inline-handlers

Rich respondeu a isso em um comentário, portanto, agradeça a ele, mas a maneira de vincular parâmetros em um manipulador de cliques é a seguinte:

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

function onDelete (id) {
  ...
}

Para fornecer alguns detalhes extras para as pessoas que também enfrentam isso, e isso deve constar nos documentos, caso contrário, você também pode obter o evento click em um manipulador:

<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
  ...
}

Eu trabalhei com isso:

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

function onDelete(id) {
}

Aqui está um método de debounce e um argumento de evento:

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


const onKeyDown = debounce(handleInput, 250);

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

Não há uma maneira clara mencionada na documentação e sua solução funcionará, mas de fato não é muito elegante. Minha própria solução preferida é usar currying no próprio bloco de scripts .

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

E no HTML

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

Cuidado com o curry

Como mencionado nos comentários, o curry tem suas armadilhas. A mais comum que no exemplo acima handleClick('parameter1')não será acionada ao clicar, mas na renderização, retornando uma função que por sua vez será acionada ao clicar. Isso significa que essa função sempre usará 'parameter1' como argumento.

Portanto, o uso desse método só seria seguro se o parâmetro usado for uma constante de algum tipo e não será alterado após a renderização.

Isso me levaria a outro ponto:

1) Se é uma constante usada um parâmetro, você também pode usar uma função separada

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

2) Se o valor for dinâmico, mas disponível no componente, isso ainda poderá ser tratado com uma função autônoma:

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

3) Se o valor for dinâmico, mas não estiver disponível no componente, porque isso depende de algum tipo de escopo (por exemplo: uma lista de itens renderizados em um bloco #each) a abordagem 'hacky' funcionará melhor. No entanto, acho que seria melhor, nesse caso, ter os elementos da lista como um componente e voltar ao caso 2

Para concluir: o curry funcionará sob determinadas circunstâncias, mas não é recomendado, a menos que você esteja muito ciente e cuidadoso sobre como usá-lo.