将值传递给函数时，Svelte 值不会在屏幕上更新

Question

有点困惑为什么下面不起作用。我已经尝试过了，我不向函数传递参数，并且可以更新 UI，但如果我传递参数并对其执行相同的操作，它会在代码中更新它，我可以 console.log 它已退出，但 UI 未更新。

这有效：

<script>

   import { text, toggle_class } from "svelte/internal";

   let line1 = {name:"line 1", display:"some text here", originalText:"some init text", visible:true};

function toggleView(){ 

    line1.visible = !line1.visible;

    if(!line1.visible) line1.display = "*************"

    else line1.display = line1.originalText

};

</script>

<main>

    <button on:click="{toggleView}">{line1.display}</button>

</main>

这不起作用：

<script>

   import { text, toggle_class } from "svelte/internal";

   let line1 = {name:"line 1", display:"some text here", originalText:"some init text", visible:true};

function toggleView(field){ 

    field.visible = !field.visible;

    if(!field.visible) field.display = "*************"

    else field.display = field.originalText

};

</script>

<main>

    <button on:click="{toggleView(line1)}">{line1.display}</button>

</main>

我认为这可能是因为我从 Svelte 的角度将其分配给局部变量，但我不确定如何调用函数来使其可重用，因为我将对一堆行执行此操作。

任何帮助，将不胜感激。

Answer 1

当您设置on:click为 时toggleView(line1)，该函数会立即执行，就像您将其设置为toggleView()而不是toggleView在其他工作示例中一样。您有两种方法可以解决此问题。最常见的方法是将on:click处理程序转变为 lambda/匿名函数：<button on:click="{() => toggleView(line1)}">{line1.display}</button>另一种不太常见的方法是修改处理函数并将其转换为柯里化函数：function toggleView(field) {&nbsp; &nbsp; return function() {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; field.visible = !field.visible;&nbsp; &nbsp; &nbsp; &nbsp; if(!field.visible) field.display = "*************"&nbsp; &nbsp; &nbsp; &nbsp; else field.display = field.originalText&nbsp; &nbsp; };};在这种情况下on:click={toggleView(field)}，将返回一个绑定到单击处理程序的函数，并且该函数将在单击按钮时实际执行。

Answer 2

在原始 HTML + JS 中，内联事件处理程序实际上onclick是在事件发生时将执行的一段代码。特别是，如果您在处理程序中使用函数，则必须调用它：示例（不是 Svelte）：<button&nbsp;onclick="toggleView()"&nbsp;/>相反，在 Svelte 中，事件处理程序应该是一个函数，它将在事件发生时被调用。好的，因为toggleView是一个函数：<button&nbsp;on:click={toggleView}&nbsp;/>不好，因为它toggleView()每次渲染标记时都会调用（即当响应式变量更改时），并且 _the 的返回值togggleView()绑定到click事件：<button&nbsp;on:click={toggleView()}&nbsp;/>如果您需要将本地参数传递给事件处理程序，那么您需要包装该函数以仍然获得您想要的内容（在事件发生时调用整个函数，而不是在重新调用标记时调用）：示例，OK + 参数：<button&nbsp;on:click={()&nbsp;=>&nbsp;toggleView(line1)}&nbsp;/>请注意，这里的处理程序是() => toggleView(line1)，而不是toggleView(line1)。