Svelte，每个块内的 on:click 事件在页面加载时触发

Question

问题是在 svelte 中 on:click 由于某种原因在页面加载时触发。任何人都可以向我解释为什么会发生这种情况以及如何防止这种情况发生，以便它仅在您实际选中该框时触发。只有当 on:click 在每个块内时才会发生这种情况。

<script>
    function handleClick(number) {
        alert(number)
    }
    let numbers = [1,2,3,4,5,6]
</script>
{#each numbers as number}
    <input type=checkbox on:click={handleClick(number)}>
{/each}

你可以看看here

Answer 1

on:click的值应该是一个函数。您正在调用函数 — 这与执行类似的操作没什么不同...

<p>{a} + {b} = {sum(a, b)}</p>

...如您所料，打印调用 sum 函数的结果。

相反，这样做：

<input type=checkbox on:click={() => handleClick(number)}>

Svelte，每个块内的 on:click 事件在页面加载时触发

Svelte, on:click event inside each block triggers on page load

events

onclick

each

svelte

pageload