在lazor的foreach循环中使用事件回调

Question

我不知道这是否是一个错误，但我会得到意外的行为。我明白了，当我修改Microsoft Doc“ EventCallback”时=“ nofollow noreferrer”>示例。

共享/child.razor：

<h3>child</h3>
<p>
    @{
        object obj = new();
    }
    @foreach(var item in DataSource)
    {
        obj = item;
        <button @onclick="() => OnClickCallback(obj)">
            @item
        </button>
    }
</p>

@code {
public List<string> DataSource = new List<string>{"cow", "dog", "pig", "rat"};

[Parameter]
public string Title { get; set; }

[Parameter]
public RenderFragment ChildContent { get; set; }

[Parameter]
public Func<object, Task> OnClickCallback { get; set; } = DoNothingAsync;

private static async Task DoNothingAsync(object param)
{
    await Task.CompletedTask;
}

}

shared/parent.razor.razor ：

    @page "/"
@inject IJSRuntime JS

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Child @ref="Child">
    Bla bla bla
</Child>


@code{
    private string message;
    private Child Child;
        
        

protected async override Task OnAfterRenderAsync(bool firstRender)
{
     Child.OnClickCallback = ShowMessage;
}

private async Task ShowMessage(object str)
{
    await JS.InvokeVoidAsync("alert", (string)str);
}
}

u71mp.png“ rel =” nofollow noreferrer“> ：我得到了带有不同标签的按钮列表，并具有以下标签=＆gt; “牛”，“狗”，“猪”，“老鼠”。当我单击任何按钮时，我应该获得一个弹出警报，以显示我单击的按钮的标签文本。

实际结果：我获得了带有不同标签的按钮列表=＆gt; “牛”，“狗”，“猪”，“老鼠”。但是，当我单击按钮时，无论我要单击哪种按钮，我都会获得一个弹出警报，显示“鼠”。

我不知道，这是一个错误吗？如果不是错误，我该如何获得预期的结果？

Answer 1

这是由于LAMDA表达的可变范围而发生的。

更改

@inject IJSRuntime JS;

@for (var i = 0; i < DataSource.Count; i++)
{
    var local_i = i;
    var local_v = @DataSource[local_i];
    <div>
       <button 
       @onclick="() => OnClickCallback(local_v)">@DataSource[i]
       </button>
    </div>
}

更改CodeBehind的

@code {

public List<string> DataSource = new List<string>{"cow", "dog", "pig", "rat"};

   private async Task OnClickCallback(string s)
   {
   Console.WriteLine(s);
   await JS.InvokeVoidAsync("alert", s);  
   }

 }

证明这里

有了这样的书面。请参阅 在这里 。

@{ int x = 0;}
@foreach (var data in DataSource)
{
    var local_v = @DataSource[x];
    <div><button
          @onclick="() => OnClickCallback(local_v)">@data</button></div>
    x++;
}