Blazor WASM FluentUI中FluentSelect回调无法获取枚举选中值

问题场景 #

使用FluentUI 4.10.3版本的FluentSelect组件，泛型类型指定为可空枚举EnumOption?，通过SelectedOptionChanged触发回调函数，但每次选中选项后，回调中传入的值始终为null，而非预期的选中枚举项（默认值为null是正常的）。

原组件代码：

<FluentSelect TOption="EnumOption?" SelectedOptionChanged="OnEnumOptionChanged">
    <FluentOption Value="@EnumOption.Blue.ToString()">Blue</FluentOption>
    <FluentOption Value="@EnumOption.Red.ToString()">Red</FluentOption>
    <FluentOption Value="@EnumOption.Green.ToString()">Green</FluentOption>
</FluentSelect>

原回调函数代码：

private void OnRedactOptionChanged(EnumOption? enumOption)
{
    // enumOption is null not the selected value
    Logger.LogInformation("Selected option {EnumOption}", enumOption);
}

问题原因 #

FluentSelect的泛型类型是EnumOption?，但子组件FluentOption的Value传递的是枚举的字符串表示，组件无法自动完成字符串到枚举类型的转换，导致回调无法正确接收选中值。另外回调函数名存在拼写错误：OnRedactOptionChanged与组件绑定的OnEnumOptionChanged不匹配。

解决方案（不使用bind） #

方案1：直接传递枚举值（推荐）

调整FluentOption的Value为枚举本身，确保类型与FluentSelect的泛型参数匹配：

修改后的组件代码：

<FluentSelect TOption="EnumOption?" SelectedOptionChanged="OnEnumOptionChanged">
    <FluentOption Value="@EnumOption.Blue">Blue</FluentOption>
    <FluentOption Value="@EnumOption.Red">Red</FluentOption>
    <FluentOption Value="@EnumOption.Green">Green</FluentOption>
</FluentSelect>

修正后的回调函数：

private void OnEnumOptionChanged(EnumOption? enumOption)
{
    Logger.LogInformation("Selected option {EnumOption}", enumOption);
}

方案2：使用字符串值并手动转换（若必须用字符串）

如果业务场景要求FluentOption传递字符串值，可以将FluentSelect的泛型类型改为string?，然后在回调中手动将字符串转换为枚举：

组件代码：

<FluentSelect TOption="string?" SelectedOptionChanged="OnEnumOptionChanged">
    <FluentOption Value="@EnumOption.Blue.ToString()">Blue</FluentOption>
    <FluentOption Value="@EnumOption.Red.ToString()">Red</FluentOption>
    <FluentOption Value="@EnumOption.Green.ToString()">Green</FluentOption>
</FluentSelect>

回调函数：

private void OnEnumOptionChanged(string? selectedValue)
{
    if (!string.IsNullOrEmpty(selectedValue) && Enum.TryParse<EnumOption>(selectedValue, out var enumOption))
    {
        Logger.LogInformation("Selected option {EnumOption}", enumOption);
    }
}

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