如何在MudSelect自定义组件中正确使用ValueChanged实现页面导航

核心问题原因 #

@bind-Value是Blazor的语法糖，会自动绑定Value属性和框架生成的ValueChanged回调，手动指定ValueChanged会触发重复绑定错误。同时默认选中失效、ValueChanged返回null，通常是因为选中值匹配逻辑或参数绑定方式不对。

正确实现方案 #

1. 定义选项类（示例）

public class SelectOption
{
    public string DisplayText { get; set; }
    public string ValueKey { get; set; }
    public string PagePath { get; set; } // 页面导航路径
}

2. 封装通用下拉组件

<MudSelect T="SelectOption"
           Value="@CurrentSelected"
           ValueChanged="@OnValueChanged"
           ToStringFunc="@(opt => opt?.DisplayText ?? string.Empty)"
           Placeholder="请选择">
    @foreach (var option in Options)
    {
        <MudSelectItem Value="@option">@option.DisplayText</MudSelectItem>
    }
</MudSelect>

@code {
    [Inject] private NavigationManager NavManager { get; set; }

    // 父组件传入的选项列表
    [Parameter] public IEnumerable<SelectOption> Options { get; set; } = Enumerable.Empty<SelectOption>();

    // 父组件传入的默认选中值
    [Parameter] public SelectOption CurrentSelected { get; set; }

    // 通知父组件选中变更的回调
    [Parameter] public EventCallback<SelectOption> CurrentSelectedChanged { get; set; }

    private async Task OnValueChanged(SelectOption newValue)
    {
        // 过滤null值，避免无效回调
        if (newValue == null) return;

        // 通知父组件更新选中状态
        await CurrentSelectedChanged.InvokeAsync(newValue);

        // 执行页面导航
        if (!string.IsNullOrWhiteSpace(newValue.PagePath))
        {
            NavManager.NavigateTo(newValue.PagePath);
        }
    }

    // 初始化时验证默认选中值有效性
    protected override void OnInitialized()
    {
        if (CurrentSelected != null && !Options.Contains(CurrentSelected))
        {
            // 若默认值不在选项列表中，自动选中第一个选项
            CurrentSelected = Options.FirstOrDefault();
        }
    }
}

3. 父组件使用示例

<CustomSelect Options="@_navOptions"
              CurrentSelected="@_defaultSelected"
              CurrentSelectedChanged="@UpdateSelectedOption" />

@code {
    private List<SelectOption> _navOptions = new()
    {
        new SelectOption { DisplayText = "首页", ValueKey = "home", PagePath = "/" },
        new SelectOption { DisplayText = "用户管理", ValueKey = "user", PagePath = "/users" },
        new SelectOption { DisplayText = "系统设置", ValueKey = "setting", PagePath = "/settings" }
    };

    private SelectOption _defaultSelected;

    protected override void OnInitialized()
    {
        // 设置默认选中项（匹配ValueKey或直接指定对象）
        _defaultSelected = _navOptions.First(opt => opt.ValueKey == "home");
    }

    private void UpdateSelectedOption(SelectOption selected)
    {
        _defaultSelected = selected;
        // 父组件额外业务逻辑（可选）
    }
}

关键注意事项 #

• 避免混用@bind-Value和手动ValueChanged：手动绑定Value和ValueChanged，遵循单向数据流原则，由父组件控制选中状态。
• 验证默认选中值：组件初始化时检查默认值是否存在于选项列表，避免无效值导致未选中。
• 处理null值：在ValueChanged回调中先过滤null，防止空引用异常。
• 显示文本配置：通过ToStringFunc指定下拉框显示的文本，避免默认显示对象类型名称。

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