BlazorColorPicker的Closed事件如何传递两个参数？

问题分析 #

你的代码存在几个核心问题：

• 事件绑定的方法名不匹配：Closed事件指向ClosedEvent，但实际定义的处理方法是ChangeEvent
• 变量引用错误：lambda表达式里的sitem应为当前循环的item（假设代码在foreach遍历逻辑中）
• 多实例状态冲突：所有ColorPicker共用同一个isOpened变量，会导致点击任意按钮时所有选择器同时打开/关闭

修正后的代码示例 #

假设你是在遍历ItemElement集合，我们用字典维护每个选择器的独立打开状态，避免多实例冲突：

Razor模板部分

@foreach (var item in Items)
{
    <button class="btn btn-primary" @onclick="() => ToggleColorPicker(item)">
        <div style="background-color:@item.Color" class="buttonColor"></div>
    </button>

    <ColorPicker 
        Title="My Blazor ColorPicker" 
        IsOpened="@GetPickerState(item)" 
        Closed="@(color => OnPickerClosed(color, item))" 
        MyColor="@item.Color">
    </ColorPicker>
}

C#逻辑部分

// 维护每个Item对应的选择器打开状态
private Dictionary<ItemElement, bool> _pickerStates = new();
public List<ItemElement> Items { get; set; } = new();

private void ToggleColorPicker(ItemElement item)
{
    if (_pickerStates.ContainsKey(item))
        _pickerStates[item] = !_pickerStates[item];
    else
        _pickerStates[item] = true;
}

private bool GetPickerState(ItemElement item)
{
    return _pickerStates.TryGetValue(item, out var isOpened) ? isOpened : false;
}

private void OnPickerClosed(string selectedColor, ItemElement item)
{
    item.Color = selectedColor;
    // 关闭当前选择器
    _pickerStates[item] = false;
}

关键注意事项 #

• 确认BlazorColorPicker的Closed事件参数类型为string（对应颜色值），若组件事件参数是自定义类型，需调整方法参数匹配
• 每个ColorPicker实例必须绑定独立的打开状态，彻底避免多实例间的状态干扰

替代组件推荐 #

如果BlazorColorPicker适配性不佳，推荐以下支持调色板+多实例的组件：

• Blazorise ColorPicker：内置调色板功能，支持自定义颜色集合，事件绑定灵活，适配多场景
• MudBlazor ColorPicker：属于MudBlazor组件库，提供丰富的调色板预设，支持颜色格式切换，多实例处理简单直接

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