Razor自定义Select组件OnClick传参报错：无法转换为EventCallback

问题原因 #

你遇到的错误是因为Blazor的@onclick需要接收EventCallback类型参数，直接调用OnClick(option.Value)会立即执行方法并返回void，无法转换成EventCallback。

解决方案 #

1. 修改点击事件绑定方式 #

将按钮的@onclick用lambda表达式包装，这样就能正确传递参数并生成符合要求的EventCallback：

@typeparam TValue
@inherits InputBase<TValue>
@namespace Accounting.Web.Components

@foreach (var option in Options)
{
    <button @onclick="() => OnClick(option.Value)">@option.Value</button>
}

2. 实现TryParseValueFromString抽象方法 #

由于组件继承自InputBase<TValue>，必须实现该抽象方法才能完成完整的模型绑定流程。针对string/int/decimal类型，可按以下方式实现：

protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? validationErrorMessage)
{
    if (typeof(TValue) == typeof(string))
    {
        result = (TValue)(object)(value ?? string.Empty);
        validationErrorMessage = null;
        return true;
    }
    else if (typeof(TValue) == typeof(int))
    {
        if (int.TryParse(value, out var intResult))
        {
            result = (TValue)(object)intResult;
            validationErrorMessage = null;
            return true;
        }
        else
        {
            result = default;
            validationErrorMessage = "请输入有效的整数";
            return false;
        }
    }
    else if (typeof(TValue) == typeof(decimal))
    {
        if (decimal.TryParse(value, out var decimalResult))
        {
            result = (TValue)(object)decimalResult;
            validationErrorMessage = null;
            return true;
        }
        else
        {
            result = default;
            validationErrorMessage = "请输入有效的小数";
            return false;
        }
    }
    else
    {
        result = default;
        validationErrorMessage = $"不支持的类型: {typeof(TValue).Name}";
        return false;
    }
}

3. 优化OnClick方法逻辑 #

使用InputBase提供的CurrentValue属性赋值，而非直接操作Value，这样会自动触发模型绑定更新和验证流程：

public void OnClick(TValue value)
{
    CurrentValue = value;
}

完整使用示例 #

在Index.razor中使用时，确保选项集合的类型与绑定属性一致：

@code {
    private AddDto AddDto = new AddDto();
    private List<MySelectOption<string>> options = new List<MySelectOption<string>>
    {
        new MySelectOption<string> { Id = 1, Value = "选项1" },
        new MySelectOption<string> { Id = 2, Value = "选项2" }
    };

    public class AddDto
    {
        public string Description { get; set; }
    }
}

<MySelect Options="@options" @bind-Value="AddDto.Description" TValue="string" />

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