Blazor中如何为onchange事件传递多个参数及可行方案咨询

在Blazor中完全可以为onchange事件传递多个参数，你遇到的编译报错是因为写法有误，以下是修正方案和替代实现思路：

一、修正你的原有代码 #

你的代码存在两个问题：

1. 事件参数类型拼写错误：ChangedEventArgs应为ChangeEventArgs
2. bind=@colorSelected与手动指定@onchange冲突（bind隐含了onchange的默认处理逻辑），若要自定义事件处理，需去掉bind并手动维护值的展示

修正后的代码示例：

<!-- 假设在循环中渲染每个项目，itemNo为当前项目的索引或编号 -->
<input type="color" value="@items[itemNo]" @onchange="@(args => HandleColorChange(args, itemNo))" />

void HandleColorChange(ChangeEventArgs args, int itemNo)
{
    var selectedColor = args.Value.ToString();
    // 为指定项目设置颜色
    items[itemNo] = selectedColor;
}

二、更优雅的替代方案 #

1. 为项目创建独立组件 #

将单个项目的颜色选择逻辑封装成组件，避免在父组件中传递额外参数：

ColorItem.razor

<div>
    <input type="color" value="@Item.Color" @onchange="HandleColorChange" />
    <span>@Item.Name</span>
</div>

@code {
    [Parameter]
    public Item Item { get; set; }

    [Parameter]
    public EventCallback<Item> OnColorChanged { get; set; }

    private void HandleColorChange(ChangeEventArgs args)
    {
        Item.Color = args.Value.ToString();
        OnColorChanged.InvokeAsync(Item);
    }

    public class Item
    {
        public int ItemNo { get; set; }
        public string Name { get; set; }
        public string Color { get; set; }
    }
}

父组件中使用

@foreach (var item in items)
{
    <ColorItem Item="@item" OnColorChanged="UpdateItem" />
}

@code {
    private List<ColorItem.Item> items = new()
    {
        new ColorItem.Item { ItemNo = 0, Name = "项目1", Color = "#55BF3B" },
        new ColorItem.Item { ItemNo = 1, Name = "项目2", Color = "#DF5353" }
    };

    private void UpdateItem(ColorItem.Item updatedItem)
    {
        // 这里可以处理项目颜色更新后的逻辑
    }
}

2. 使用匿名函数捕获上下文参数 #

如果不想拆分组件，也可以通过lambda表达式直接捕获循环中的项目对象，省去传递itemNo的步骤：

@foreach (var item in items)
{
    var currentItem = item; // 必须捕获当前循环变量的副本，避免闭包陷阱
    <input type="color" value="@currentItem.Color" @onchange="@(args => {
        currentItem.Color = args.Value.ToString();
        // 其他逻辑
    })" />
}

@code {
    private List<Item> items = new()
    {
        new Item { ItemNo = 0, Name = "项目1", Color = "#55BF3B" },
        new Item { ItemNo = 1, Name = "项目2", Color = "#DF5353" }
    };

    public class Item
    {
        public int ItemNo { get; set; }
        public string Name { get; set; }
        public string Color { get; set; }
    }
}

注意：循环中捕获变量时必须创建副本（var currentItem = item），否则所有事件处理都会引用最后一个循环项。

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