MudBlazor MudSelect选择变更时触发哪个事件及如何实现？

问题原因 #

你用错了事件：

• SelectedValuesChanged是多选模式（需设置MultiSelection="true"）下才会触发的事件，单选场景不生效。
• MudBlazor组件不支持原生@onchange，必须使用组件自身提供的事件或绑定方式。

解决方案 #

方式1：使用ValueChanged事件监听选中变化 #

直接给MudSelect绑定ValueChanged事件，选中值变化时会触发对应的处理方法：

<MudSelect T="Stage" Label="Stage" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter"
           ValueChanged="HandleStageSelected">
    <MudSelectItem Value="@(new Stage("Stage 1"))" />
    <MudSelectItem Value="@(new Stage("Stage 2"))" />
    <MudSelectItem Value="@(new Stage("Stage 3"))" />
    <MudSelectItem Value="@(new Stage("Stage 4"))" />
    <MudSelectItem Value="@(new Stage("Stage 5"))" />
</MudSelect>

在@code块中添加处理方法：

public class Stage
{
    public Stage(string stageName)
    {
        StageName = stageName;
    }

    public readonly string StageName;

    public override bool Equals(object o)
    {
        var other = o as Stage;
        return other?.StageName == StageName;
    }

    public override int GetHashCode() => StageName?.GetHashCode() ?? 0;

    public override string ToString() => StageName;
}

private void HandleStageSelected(Stage selectedStage)
{
    // 在这里处理选中后的逻辑，比如获取选中的Stage对象
    Console.WriteLine($"当前选中：{selectedStage.StageName}");
}

方式2：使用双向绑定@bind-Value #

通过双向绑定将选中值同步到变量，还可以在变量的setter中处理变化逻辑：

<MudSelect T="Stage" Label="Stage" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter"
           @bind-Value="_currentStage">
    <MudSelectItem Value="@(new Stage("Stage 1"))" />
    <MudSelectItem Value="@(new Stage("Stage 2"))" />
    <MudSelectItem Value="@(new Stage("Stage 3"))" />
    <MudSelectItem Value="@(new Stage("Stage 4"))" />
    <MudSelectItem Value="@(new Stage("Stage 5"))" />
</MudSelect>

在@code块中添加变量及可选的逻辑处理：

public class Stage
{
    // 保持你原有的Stage类实现不变
    public Stage(string stageName)
    {
        StageName = stageName;
    }

    public readonly string StageName;

    public override bool Equals(object o)
    {
        var other = o as Stage;
        return other?.StageName == StageName;
    }

    public override int GetHashCode() => StageName?.GetHashCode() ?? 0;

    public override string ToString() => StageName;
}

// 双向绑定的变量
private Stage _currentStage;

// 若需要在值变化时自动执行逻辑，可手动封装属性
private Stage CurrentStage
{
    get => _currentStage;
    set
    {
        _currentStage = value;
        // 值变化时的处理逻辑
        if (_currentStage != null)
        {
            Console.WriteLine($"选中状态更新：{_currentStage.StageName}");
        }
    }
}
// 此时将@bind-Value改为@bind-Value="CurrentStage"即可

注意事项 #

你的Stage类已经正确重写了Equals和GetHashCode方法，这是MudSelect正确识别选中项的关键，无需修改。

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