我正在遍歷一個大型物件串列，所有這些物件都將打開將加載動態資訊的相同模式視窗。為了完成這項作業，我創建了一個名為 MenuCounter 的計數器，我知道它的增量很好。
也就是說，我試圖在我需要使用的圖示周圍環繞一個超鏈接，并且方法的注入一直指向 MenuCounter 的最后一個值。
我首先嘗試了這個：
<a href="#" onclick="@(() => SetupChangeName(MenuCounter))" class="menuButton">...</a>
當我遇到這個問題時，我嘗試將代碼簡化為以下代碼，但隨后頁面以某種方式激活了超鏈接，并且模態視窗出現并且不會消失。
<a href="#" onclick="SetupChangeName(MenuCounter)" class="menuButton">...</a>
有人可以幫我嗎？
謝謝！
uj5u.com熱心網友回復：
您應該將 lambda 運算式應用于 Blazor@onclick指令，而不是使用onclickHtml 屬性，在這種情況下，它應該呼叫 JS 函式，這不是您的意思。
請注意，我引入了一個新指令來防止錨元素的默認操作： @onclick:preventDefault
測驗這段代碼：
@page "/"
<a href="#" @onclick:preventDefault @onclick="@(() => SetupChangeName(MenuCounter))" >Click me...</a>
<div>Counter is @output</div>
@code
{
private int MenuCounter = 10;
private int output;
private void SetupChangeName (int counter)
{
output = counter;
}
}
注意：如果您使用 for 回圈來呈現錨元素串列，則必須定義回圈的區域變數，并將其作為 lambda 運算式的輸入，如下所示：
@for(int MenuCounter = 0; MenuCounter < 10; MenuCounter )
{
int local= MenuCounter;
<a href="#" @onclick:preventDefault @onclick="@(() =>
SetupChangeName(local))" >Click me...</a>
}
否則，所有 lambda 運算式都將具有相同的 值MenuCounter，即上次迭代增加的值。請參閱For 回圈未回傳預期值 - C# - Blazor解釋該問題。
uj5u.com熱心網友回復：
我不是onclick屬性的粉絲，但如果你設定了這個方法，我相信你只需要像這樣在同一行中清理 C# 和 JS：
<a href="#" onclick="SetupChangeName('@MenuCounter')" class="menuButton">...</a>
添加引號將確保 JS 至少存在一個空字串，然后您可以處理它。
替代方法
由于混合這樣的語言非常令人沮喪，我發現使用資料標簽更容易，例如
<a href="#" data-menu-counter="@MenuCounter" class="menuButton">...</a>
然后在你的 JS 檔案中：
var links = document.querySelectorAll('[data-menu-counter]');
links.forEach(x => x.addEventListener('click', /* your function code here */);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/360514.html