Come passare i parametri a on: fare clic su Svelte?

Associare una funzione a un pulsante è semplice e diretto:

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

Ma non vedo un modo per passare parametri (argomenti) alla funzione, quando faccio questo:

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

La funzione viene chiamata al caricamento della pagina e mai più.

È possibile affatto passare parametri da cui chiamare la funzione on:click{}?

Ho appena trovato un modo bizzarro per farlo. La chiamata della funzione da un gestore in linea funziona.

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

TL; DR

Basta avvolgere la funzione di gestione in un'altra funzione, per l'eleganza utilizzare la funzione freccia

È necessario utilizzare una dichiarazione di funzione e quindi chiamare il gestore con argomenti. Le funzioni freccia sono eleganti e utili per questo scenario.

PERCHÉ ho bisogno di un altro wrapper di funzioni?

Se utilizzassi solo il gestore e passassi i parametri, come sarebbe?

Probabilmente qualcosa del genere:

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

Ma ricorda, handleClick("arg1")questo è il modo in cui invochi immediatamente la funzione, ed è esattamente ciò che sta accadendo quando la metti in questo modo, verrà chiamato quando l'esecuzione raggiunge questa linea e non come previsto, SU BOTTONE CLIC ...

Pertanto, è necessaria una dichiarazione di funzione, che verrà invocata solo dall'evento click e al suo interno si chiama il gestore con tutti gli argomenti che si desidera.

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

Come ha sottolineato @Rich Harris (l'autore di Svelte) nei commenti sopra: questo non è un trucco, ma è ciò che la documentazione mostra anche nei loro tutorial: https://svelte.dev/tutorial/inline-handlers

Rich ha risposto a questo in un commento, quindi merito a lui, ma il modo di associare i parametri in un gestore di clic è il seguente:

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

function onDelete (id) {
  ...
}

Per fornire alcuni dettagli extra per le persone che hanno anche problemi con questo, e dovrebbe essere nei documenti se non lo è, puoi anche ottenere l'evento click in un tale gestore:

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

Ho capito che funziona con questo:

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

function onDelete(id) {
}

Eccolo qui con un metodo debounce e un argomento evento:

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


const onKeyDown = debounce(handleInput, 250);

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

Non c'è un modo chiaro menzionato nella documentazione e la tua soluzione funzionerà ma in effetti non è molto elegante. La mia soluzione preferita è usare il curry nel blocco di script stesso.

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

E in HTML

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

Attenzione al curry

Come menzionato nei commenti, il curry ha le sue insidie. Quello più comune che nell'esempio sopra handleClick('parameter1')non verrà attivato quando si fa clic ma piuttosto sul rendering, restituendo una funzione che a sua volta verrà attivata sul clic. Ciò significa che questa funzione utilizzerà sempre 'parametro1' come argomento.

Pertanto, l'utilizzo di questo metodo sarebbe sicuro solo se il parametro utilizzato è una costante di qualche tipo e non cambierà una volta eseguito il rendering.

Questo mi porterebbe ad un altro punto:

1) Se si utilizza una costante come parametro, è possibile utilizzare anche una funzione separata

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

2) Se il valore è dinamico ma disponibile all'interno del componente, questo potrebbe ancora essere gestito con una funzione autonoma:

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

3) Se il valore è dinamico ma non disponibile dal componente perché dipende da un tipo di ambito (es: un elenco di elementi renderizzati in un blocco #each) l' approccio 'hacky' funzionerà meglio. Tuttavia, penso che sarebbe meglio in quel caso avere gli elementi della lista come componente stessi e tornare al caso n. 2

Per concludere: il curry funzionerà in determinate circostanze ma non è raccomandato a meno che tu non sia ben consapevole e attento su come usarlo.