从 Blazor 中生成的按钮调用函数

Posted 2023-03-27

【中文标题】从 Blazor 中生成的按钮调用函数

【英文标题】：Calling function from generated button in Blazor

【发布时间】：2019-03-21 10:41:40

【问题描述】：

我目前正在尝试从一些自动生成的按钮调用一个方法，这些按钮是通过一些配置设置的。所以按钮的数量是可配置的。我有如下所示的 Blazor 页面。我的问题是，如果我有 3 个按钮并且我按下一个按钮，那么 ButtonClicked 会被正确调用，但索引始终为 3 - for 语句的 int i 的最终值。我当然希望将按钮的索引传递给函数。一个明显的解决方案是在我自己的组件中包装一个按钮，然后它会采用一个索引参数，这可以传递给一个 buttonclicked 事件，但是如何在不制作我自己的按钮组件的情况下使下面的代码工作？

@inject Navigator navigator

<div class="chooseDiv">
    @for (int i = 0; i < Buttons.Count; i++)
    
        <button type="button" class="btn btn-primary btn-lg" style="margin:10px" onclick="@((ui) => ButtonClicked(i))">@Buttons[i]</button>
    
</div>

@functions 
    [Parameter] List<string> Buttons  get; set;  = new List<string>()  "You forgot to declare your buttons" ;

    private void ButtonClicked(int index)
    
        Console.WriteLine("Button clicked with index:" + index);
        navigator.CurrentResult = index;
        navigator.Next();
    

【参考方案1】：

我猜你应该在循环中添加一个局部变量，如下所示：

@for (int i = 0; i < Buttons.Count; i++)
    
        var local = i;
        <button type="button" class="btn btn-primary btn-lg" style="margin:10px" onclick="@((ui) => ButtonClicked(local))">@Buttons[i]</button>
    

这是标准 C# 行为，与 Blazor 无关，其中 lambda 表达式 @((ui) => ButtonClicked(i)) 可以访问变量而不是其值。你必须定义一个对你的循环来说是本地的变量，否则你的 lambda 表达式总是调用 ButtonClicked(i) 并且当循环结束时 i 等于 3。

希望这会有所帮助...