如何将按钮值传入onclick事件？解决循环中i值异常问题

问题根源 #

你遇到的是闭包捕获变量引用的问题：for循环里的i是同一个变量，所有按钮的点击事件lambda表达式捕获的是这个变量的引用，而非循环时的具体值。当循环结束后，i的值已经变成maxPage + 1（也就是6），所以点击任何按钮都会调用dosomething(6)。另外代码里this.value是字符串类型，而dosomething参数是int，类型不匹配会直接导致崩溃。

解决方法 #

在循环内部创建一个局部变量，保存当前循环的i值，让每个lambda表达式捕获这个局部变量的副本，就能拿到对应按钮的正确数值。同时直接传递这个局部变量给方法，避免类型转换问题。

修正后的代码：

@for (int i = 1; i < maxPage + 1; i++)
{
    // 创建局部变量保存当前i的值
    var currentPage = i;
    <button @onclick="@(() => dosomething(currentPage))">@currentPage</button>
}

@code {
    int maxPage = 5;
 
    private void dosomething(int val)
    {
        Console.WriteLine(val);
    }
}

补充说明 #

如果一定要用按钮的value属性传递值，需要将字符串类型的value转换为int，同时同样要捕获局部变量，代码示例：

@for (int i = 1; i < maxPage + 1; i++)
{
    var currentPage = i;
    <button value="@currentPage" @onclick="@(e => dosomething(int.Parse(e.CurrentTarget.Value)))">@currentPage</button>
}

@code {
    int maxPage = 5;
 
    private void dosomething(int val)
    {
        Console.WriteLine(val);
    }
}

内容的提问来源于stack exchange，提问作者Lisa