将值传递给函数时，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) {

    return function() { 

        field.visible = !field.visible;

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

        else field.display = field.originalText

    };

};

在这种情况下on:click={toggleView(field)}，将返回一个绑定到单击处理程序的函数，并且该函数将在单击按钮时实际执行。

Answer 2

在原始 HTML + JS 中，内联事件处理程序实际上onclick是在事件发生时将执行的一段代码。特别是，如果您在处理程序中使用函数，则必须调用它：

示例（不是 Svelte）：

<button onclick="toggleView()" />

相反，在 Svelte 中，事件处理程序应该是一个函数，它将在事件发生时被调用。

好的，因为toggleView是一个函数：

<button on:click={toggleView} />

不好，因为它toggleView()每次渲染标记时都会调用（即当响应式变量更改时），并且 _the 的返回值togggleView()绑定到click事件：

<button on:click={toggleView()} />

如果您需要将本地参数传递给事件处理程序，那么您需要包装该函数以仍然获得您想要的内容（在事件发生时调用整个函数，而不是在重新调用标记时调用）：

示例，OK + 参数：

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

请注意，这里的处理程序是() => toggleView(line1)，而不是toggleView(line1)。