So übergeben Sie Parameter an: Klicken Sie in Svelte?

Das Binden einer Funktion an eine Schaltfläche ist einfach und unkompliziert:

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

Aber ich sehe keine Möglichkeit, Parameter (Argumente) an die Funktion zu übergeben, wenn ich dies tue:

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

Die Funktion wird beim Laden der Seite aufgerufen und nie wieder.

Ist es überhaupt möglich, Parameter an die aufgerufene Funktion zu übergeben on:click{}?

Ich habe gerade einen hackigen Weg gefunden, es zu tun. Das Aufrufen der Funktion von einem Inline-Handler aus funktioniert.

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

TL; DR

Wickeln Sie die Handlerfunktion einfach in eine andere Funktion ein. Verwenden Sie für Eleganz die Pfeilfunktion

Sie müssen eine Funktionsdeklaration verwenden und dann den Handler mit Argumenten aufrufen. Die Pfeilfunktion ist elegant und gut für dieses Szenario.

WARUM brauche ich einen anderen Funktions-Wrapper?

Wenn Sie nur den Handler verwenden und die Parameter übergeben würden, wie würde es aussehen?

Wahrscheinlich so etwas:

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

Aber denken handleClick("arg1")Sie daran, auf diese Weise rufen Sie die Funktion sofort auf, und genau das passiert, wenn Sie sie so ausdrücken. Sie wird aufgerufen, wenn die Ausführung diese Zeile erreicht, und nicht wie erwartet, AUF TASTE KLICKEN ...

Daher benötigen Sie eine Funktionsdeklaration, die nur vom click-Ereignis aufgerufen wird. Darin rufen Sie Ihren Handler mit so vielen Argumenten auf, wie Sie möchten.

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

Wie @Rich Harris (der Autor von Svelte) in den obigen Kommentaren betonte: Dies ist kein Hack, aber das zeigt die Dokumentation auch in ihren Tutorials: https://svelte.dev/tutorial/inline-handlers

Rich hat dies in einem Kommentar beantwortet, also danke ihm, aber die Art und Weise, Parameter in einem Klick-Handler zu binden, ist wie folgt:

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

function onDelete (id) {
  ...
}

Etwas mehr Detail für Menschen, die auch mit diesem Kampf, und es sollte in der Dokumentation, wenn dies nicht der Fall, können Sie auch das Click - Ereignis in eine solche Handler bekommen kann:

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

Ich habe es damit zum Laufen gebracht:

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

function onDelete(id) {
}

Hier ist es mit einer Entprellungsmethode und einem Ereignisargument:

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


const onKeyDown = debounce(handleInput, 250);

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

In der Dokumentation wird kein klarer Weg erwähnt, und Ihre Lösung wird funktionieren, ist aber in der Tat nicht sehr elegant. Meine eigene bevorzugte Lösung ist die Verwendung currying im Skript selbst blockieren.

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

Und im HTML

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

Vorsicht vor Curry

Wie in den Kommentaren erwähnt, hat Curry seine Tücken. Die häufigste, die im obigen Beispiel handleClick('parameter1')nicht beim Klicken, sondern beim Rendern ausgelöst wird und eine Funktion zurückgibt, die wiederum beim Klicken ausgelöst wird. Dies bedeutet, dass diese Funktion immer 'parameter1' als Argument verwendet.

Daher ist die Verwendung dieser Methode nur dann sicher, wenn der verwendete Parameter eine Konstante ist und sich nach dem Rendern nicht ändert.

Dies würde mich zu einem anderen Punkt bringen:

1) Wenn es sich um eine Konstante handelt, die einen Parameter verwendet, können Sie auch eine separate Funktion verwenden

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

2) Wenn der Wert dynamisch ist, aber innerhalb der Komponente verfügbar ist, kann dies weiterhin mit einer eigenständigen Funktion behandelt werden:

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

3) Wenn der Wert dynamisch ist, aber nicht in der Komponente verfügbar ist, da dies von einem bestimmten Bereich abhängt (z. B. einer Liste von Elementen, die in einem # jedes Block gerendert werden) , funktioniert der 'hacky'- Ansatz besser. Ich denke jedoch, dass es in diesem Fall besser wäre, die Listenelemente selbst als Komponente zu haben und auf Fall 2 zurückzugreifen

Fazit: Currying funktioniert unter bestimmten Umständen, wird jedoch nicht empfohlen, es sei denn, Sie wissen genau, wie Sie es verwenden.