javascript - 分配给用作事件处理程序的变量不是 react 性的 :

Question

在下面的代码中(onMount 为简洁起见省略)，count 和 handler 属性都用在了 h1 元素中。 handler 变量在 3 秒后更新；但它不会改变元素的行为。

在处理程序的定义需要动态更改的情况下，最好的方法是什么？

<script>
let count = 0;
let handler = () => {};

function update() {
    if (count >= 3) {handler = () => {count = 0;}}
    count++;
}
setInterval(update, 1000);
</script>

<h1 on:click={handler}>{count}</h1>

https://svelte.dev/repl/cb0469ba5d8241e382677ad95a659b76?version=3.12.1

Answer 1

哇，太棒了，我希望你的代码能工作!看起来 Svelte 在有反应性更新时没有更新 on:click 绑定(bind)，这很奇怪!

作为变通方法，您可以为 on:click 提供一个调用动态更改函数的匿名函数，如下所示:

<h1 on:click={() => handler()}>{count}</h1>

这似乎可以解决问题。这是一个 updated REPL