亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將值傳遞給函數時,Svelte 值不會在屏幕上更新

將值傳遞給函數時,Svelte 值不會在屏幕上更新

慕尼黑5688855 2023-07-14 16:33:54
有點困惑為什么下面不起作用。我已經嘗試過了,我不向函數傳遞參數,并且可以更新 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 的角度將其分配給局部變量,但我不確定如何調用函數來使其可重用,因為我將對一堆行執行此操作。任何幫助,將不勝感激。
查看完整描述

2 回答

?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

當您設置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)},將返回一個綁定到單擊處理程序的函數,并且該函數將在單擊按鈕時實際執行。


查看完整回答
反對 回復 2023-07-14
?
慕桂英546537

TA貢獻1848條經驗 獲得超10個贊

在原始 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)


查看完整回答
反對 回復 2023-07-14
  • 2 回答
  • 0 關注
  • 196 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號