如何将参数传递到ON：Click in Svelte？

Question

将函数绑定到按钮是简单明了的：

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

但我看不到一种向函数传递参数（参数）的方法，当我这样做时：

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

该函数在页面加载时调用，并且不再调用。

是否有可能将参数传递给从上调用的函数：Click{}？

null

null

我只是找到了一个很奇怪的方法。从内联处理程序调用该函数可以工作。

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

Answer 1

Rich在一个评论中回答了这个问题，这值得称赞，但是在click处理程序中绑定参数的方法如下：

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

Answer 2

只需将处理程序函数包装在另一个函数中即可。为了美观起见，使用箭头函数。

您必须使用函数声明，然后使用参数调用处理程序。箭头函数非常适合这种情况。

为什么我需要另一个函数包装器？

如果只使用处理程序并传递参数，会是什么样子？

大概是这样的：

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

但请记住，handleClick（“arg1”）这是您立即调用函数的方式，而这正是您以这种方式调用函数时所发生的情况，当执行到达这一行时，它将被调用，而不是预期的那样，单击按钮时...

因此，您需要一个函数声明，该函数声明将仅由click事件调用，并且在该函数声明中，您可以使用所需的任意多个参数来调用处理程序。

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

正如@Rich Harris（Svelte的作者）在上面的评论中所指出的：这不是一个黑客，而是文档在他们的教程中所展示的：https：//Svelte.dev/tutorial/inline-handlers