Как передать параметры в on: click в Svelte?

TL;DR

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

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

Зачем мне нужна другая оболочка функции?

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

Наверное, примерно так:

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

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

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

<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>
<script>
function onDelete (id) {
  ...
}
</script>

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

<a href="#" on:click={event => onDelete(event)}>delete</a>
<script>
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
  ...
}
</script>

Документы / учебник Svelte: встроенные обработчики

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

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

function onDelete(id) {
}

В документации нет четкого указания, и ваше решение будет работать, но действительно не очень элегантно. Я предпочитаю использовать каррирование в самом блоке script.

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.

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

Вот он с методом противодействия и аргументом события:

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


const onKeyDown = debounce(handleInput, 250);

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

При риске некропостинга перейдите на страницу https://svelte.dev/repl/08aca4e5d75e4ba7b8b05680f3d3bf7a?version=3.23.1

сортируемая таблица. Обратите внимание на передачу параметров в функцию обработки щелчка заголовка волшебным образом. Понятия не имею, почему это так. Может быть, авто-каррирование?