Jak przekazać parametry do: kliknij Svelte?

Powiązanie funkcji z przyciskiem jest łatwe i proste:

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

Ale nie widzę sposobu na przekazywanie parametrów (argumentów) do funkcji, gdy to robię:

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

Funkcja jest wywoływana przy ładowaniu strony i nigdy więcej.

Czy w ogóle można przekazać parametry do wywoływanej funkcji on:click{}?

Właśnie znalazłem hackerski sposób, aby to zrobić. Działa wywoływanie funkcji z wbudowanego modułu obsługi.

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

TL; DR

Wystarczy zawinąć funkcję modułu obsługi w inną funkcję, aby użyć funkcji strzałki elegancji

Musisz użyć deklaracji funkcji, a następnie wywołać program obsługi z argumentami. Funkcja strzałki jest elegancka i dobra w tym scenariuszu.

DLACZEGO potrzebuję innego opakowania funkcji?

Gdybyś użył tylko modułu obsługi i przekazał parametry, jak by to wyglądało?

Prawdopodobnie coś takiego:

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

Pamiętaj jednak, handleClick("arg1")że w ten sposób wywołujesz funkcję natychmiast, i właśnie tak się dzieje, gdy ujmujesz to w ten sposób, zostanie ona wywołana, gdy wykonanie osiągnie tę linię, a nie zgodnie z oczekiwaniami, PRZYCISK PRZYCISKU ...

Dlatego potrzebujesz deklaracji funkcji, która będzie wywoływana tylko przez zdarzenie click, a wewnątrz niej wywołujesz program obsługi z dowolną liczbą argumentów.

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

Jak zauważył @Rich Harris (autor Svelte) w komentarzach powyżej: To nie jest hack, ale to, co dokumentacja pokazuje również w ich samouczkach: https://svelte.dev/tutorial/inline-handlers

Rich odpowiedział na to w komentarzu, więc mu to dziękuję, ale sposób wiązania parametrów w module obsługi kliknięć jest następujący:

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

function onDelete (id) {
  ...
}

Aby podać dodatkowe szczegóły dla osób, które również borykają się z tym problemem, a jeśli tak nie jest, powinny one znajdować się w dokumentacji, można również uzyskać zdarzenie click w takim module obsługi:

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

Mam z tym do czynienia:

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

function onDelete(id) {
}

Oto metoda debounce i argument zdarzenia:

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


const onKeyDown = debounce(handleInput, 250);

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

W dokumentacji nie ma wyraźnego sposobu, a twoje rozwiązanie będzie działać, ale w rzeczywistości nie jest zbyt eleganckie. Moim preferowanym rozwiązaniem jest używanie curry w samym bloku skryptu .

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

I w HTML

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

Uważaj na curry

Jak wspomniano w komentarzach, curry ma swoje pułapki. Najczęstszy z nich, który w powyższym przykładzie handleClick('parameter1')nie zostanie uruchomiony po kliknięciu, ale podczas renderowania, zwracając funkcję, która z kolei zostanie uruchomiona po kliknięciu. Oznacza to, że ta funkcja zawsze używa argumentu jako parametr1.

Dlatego użycie tej metody byłoby bezpieczne tylko wtedy, gdy użyty parametr jest pewnego rodzaju stałą i nie zmieni się po wyrenderowaniu.

To doprowadziłoby mnie do innego punktu:

1) Jeśli jest to stała używana parametr, równie dobrze możesz użyć oddzielnej funkcji

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

2) Jeśli wartość jest dynamiczna, ale dostępna w komponencie, można to nadal obsługiwać za pomocą autonomicznej funkcji:

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

3) Jeśli wartość jest dynamiczna, ale nie jest dostępna z komponentu, ponieważ zależy to od pewnego rodzaju zakresu (np. Listy elementów renderowanych w bloku #each) , podejście „hacky” będzie działać lepiej. Myślę jednak, że w takim przypadku lepiej byłoby mieć elementy listy jako komponent i wrócić do przypadku nr 2

Podsumowując: curry będzie działać w pewnych okolicznościach, ale nie jest zalecane, chyba że jesteś bardzo dobrze świadomy i ostrożny, jak go używać.