当选择更改时，会调用 MudBlazor MudSelect 中的哪个事件以及如何实现？

Question

我正在使用 MudBlazor 并按照文档实现了 MudSelect 组件。

但是，当做出选择但不确定要调用哪个事件时，我尝试从 MudSelect 获取所选值。尝试了一些，例如 SelectedValuesChanged，但是当选择更新时，我的代码块中没有任何内容触发。

使用标准 HTML 选择，我只需调用 @onchange，然后为该事件编写一个方法。这在 MudBlazor 中不起作用。

这是我的 MudSelect

<MudSelect T="Stage" Label="Stage" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter">
    <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;
}

Answer 1

您可以使用ValueChanged当 Value 属性更改时触发的事件回调。

执行：

<MudSelect T="Stage" 
        ToStringFunc="@converter"
        ValueChanged="OnValueChanged" 
        Label="Stage" 
        Variant="Variant.Filled" 
        AnchorOrigin="Origin.BottomCenter">
    <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>

@if(selectedStage is not null)
{
    <br/>
    <MudAlert Severity="Severity.Info">@(selectedStage.StageName) was selected</MudAlert>
}

@code {
    private Stage selectedStage {get; set;}
    readonly Func<Stage, string> converter = p => p.StageName;

    private void OnValueChanged(Stage selected)
    {
        selectedStage = selected;
        // Do other stuff
    }

    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;
    }
}

演示： https:
//try.mudblazor.com/snippet/cOwGFYQavuiuzWnd

输出：