Question

将功能绑定到按钮非常简单明了：

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

Answer 1

TL; DR

只需将处理程序函数包装在另一个函数中，为了优雅起见，请使用箭头函数

您必须使用函数声明，然后使用参数调用处理程序。箭头功能很优雅，在这种情况下很好。

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

如果仅使用处理程序并传递参数，它将是什么样？

大概是这样的：

<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

Answer 2

Rich已在评论中回答了这个问题，因此功劳他，但是在单击处理程序中绑定参数的方法如下：

<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 3

我可以使用它：

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

function onDelete(id) {
}

Answer 4

此处带有去抖方法和事件参数：

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


const onKeyDown = debounce(handleInput, 250);

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

Answer 5

有尸检风险，请查看https://svelte.dev/repl/08aca4e5d75e4ba7b8b05680f3d3bf7a?version=3.23.1

可排序的表。请注意以一种神奇的方式将参数传递给标题单击处理函数。不知道为什么会这样。也许自动柯里化？

Answer 6

文档中没有提到明确的方法，您的解决方案可以使用，但确实不是很好。我自己的首选解决方案是在 script 块本身中使用 currying 。

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

在HTML

中

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

提防虚假

正如评论中提到的那样，curry有其陷阱。在上面的示例handleClick('parameter1')中，最常见的一个是单击时不会触发，而是在渲染时返回，而返回的函数会在onclick时触发。这意味着此功能将始终使用“ parameter1”作为参数。

因此，只有在使用的参数是某种常量时才使用此方法是安全的，并且一旦呈现就不会更改。

这会使我想到另一点：

1）如果它是使用参数的常量，那么也可以使用单独的函数

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

2）如果该值是动态的但在组件内可用，则仍可以使用独立函数来处理：

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

3）如果该值是动态的但由于依赖于某种范围（例如，在#each块中呈现的项目列表）而无法从组件中获得，则'hacky'方法会更好。但是，我认为在这种情况下最好将list-elements本身作为一个组件，然后再回到案例＃2

总结：在某些情况下可以使用currying，但除非您非常了解并谨慎使用它，否则不建议使用currging。

如何将参数传递给on：在Svelte中单击？

6 个答案:

TL; DR