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

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)
。
添加回答
舉報