Как передать параметры на: нажмите в Svelte?

Привязать функцию к кнопке легко и просто:

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

Но я не вижу способа передать параметры (аргументы) в функцию, когда я делаю это:

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

Функция вызывается при загрузке страницы и никогда больше.

Можно ли вообще передавать параметры в вызываемую функцию on:click{}?

Я только что нашел хакерский способ сделать это. Вызов функции из встроенного обработчика работает.

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

TL; DR

Просто оберните функцию обработчика в другую функцию, для элегантности используйте функцию стрелки

Вы должны использовать объявление функции, а затем вызвать обработчик с аргументами. Функция стрелки элегантна и хороша для этого сценария.

ПОЧЕМУ мне нужна еще одна функция-обертка?

Если бы вы использовали только обработчик и передавали параметры, как бы это выглядело?

Вероятно, что-то вроде этого:

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

Но помните, handleClick("arg1")это то, как вы вызываете функцию мгновенно, и именно так и происходит, когда вы ее называете так, она будет вызываться, когда выполнение достигает этой строки, а не так, как ожидалось, НА КНОПКЕ CLICK ...

Следовательно, вам нужно объявление функции, которое будет вызываться только событием click, и внутри него вы вызываете свой обработчик с таким количеством аргументов, сколько захотите.

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

Как отметил @Rich Harris (автор Svelte) в комментариях выше: это не хак, но то, что документация показывает также в своих руководствах: https://svelte.dev/tutorial/inline-handlers.

Рич ответил на это в комментарии, так что поверьте ему, но способ привязки параметров в обработчике кликов заключается в следующем:

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

function onDelete (id) {
  ...
}

Чтобы предоставить некоторые дополнительные сведения людям, которые также борются с этим, и это должно быть в документах, если это не так, вы также можете получить событие click в таком обработчике:

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

Я получил это работает с этим:

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

function onDelete(id) {
}

Вот это с методом debounce и аргументом события:

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


const onKeyDown = debounce(handleInput, 250);

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

Там нет четкого пути, упомянутого в документации, и ваше решение будет работать, но на самом деле не очень элегантно. Мое собственное предпочтительное решение - использовать каррирование в самом блоке скрипта .

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

И в HTML

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

Остерегайтесь карри

Как уже упоминалось в комментариях, карри имеет свои подводные камни. Наиболее распространенный handleClick('parameter1')вариант, который в приведенном выше примере будет вызываться не при нажатии, а при рендеринге, возвращая функцию, которая, в свою очередь, будет запущена при нажатии. Это означает, что эта функция всегда будет использовать «параметр1» в качестве аргумента.

Поэтому использование этого метода будет безопасным только в том случае, если используемый параметр является некоторой константой и не изменится после того, как он будет представлен.

Это привело бы меня к другому вопросу:

1) Если в качестве константы используется параметр, вы также можете использовать отдельную функцию

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

2) Если значение является динамическим, но доступно внутри компонента, это все равно можно обработать с помощью отдельной функции:

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

3) Если значение является динамическим, но не доступно из компонента, поскольку оно зависит от некоторой области видимости (например, список элементов, отображаемых в блоке #each), подход «хакерский» будет работать лучше. Однако я думаю, что в этом случае было бы лучше, если бы сами элементы списка были компонентом и вернулись к случаю № 2.

В заключение: карри будет работать при определенных обстоятельствах, но не рекомендуется, если вы не очень хорошо осведомлены и не знаете, как его использовать.