MudSelectItem的OnClick事件未触发问题求助

MudSelect的下拉项默认逻辑是点击后选中值并关闭下拉，内置事件会覆盖或阻止自定义OnClick的触发，尤其在你需要选中制造商后加载车型的场景下，更推荐贴合组件原生设计的实现方式。

方案1：利用MudSelect的ValueChanged事件（推荐） #

这是最适配MudSelect的处理方式，当选中项变化时自动触发车型加载逻辑，完全规避OnClick的触发问题。

<MudSelect T="Manufacturer" 
           @bind-Value="SelectedManufacturer" 
           Label="选择制造商" 
           Variant="Variant.Outlined">
    @foreach (var manufacturer in Manufacturers)
    {
        <MudSelectItem Value="manufacturer">@manufacturer.Name</MudSelectItem>
    }
</MudSelect>

<MudSelect T="CarModel" 
           @bind-Value="SelectedModel" 
           Label="选择车型" 
           Variant="Variant.Outlined" 
           Disabled="@(SelectedManufacturer == null)">
    @foreach (var model in Models)
    {
        <MudSelectItem Value="model">@model.Name</MudSelectItem>
    }
</MudSelect>

@code {
    private Manufacturer SelectedManufacturer { get; set; }
    private CarModel SelectedModel { get; set; }
    private List<Manufacturer> Manufacturers { get; set; } = new();
    private List<CarModel> Models { get; set; } = new();

    protected override async Task OnInitializedAsync()
    {
        // 初始化加载制造商列表
        Manufacturers = await GetManufacturersAsync();
    }

    // 监听制造商选中值变化，自动加载对应车型
    private async Task SelectedManufacturerChanged(Manufacturer manufacturer)
    {
        SelectedManufacturer = manufacturer;
        SelectedModel = null; // 重置选中车型
        if (manufacturer != null)
        {
            Models = await GetModelsByManufacturerIdAsync(manufacturer.Id);
        }
        else
        {
            Models.Clear();
        }
    }

    // 模拟API调用方法
    private Task<List<Manufacturer>> GetManufacturersAsync()
    {
        return Task.FromResult(new List<Manufacturer>
        {
            new Manufacturer { Id = 1, Name = "丰田" },
            new Manufacturer { Id = 2, Name = "大众" }
        });
    }

    private Task<List<CarModel>> GetModelsByManufacturerIdAsync(int manufacturerId)
    {
        var models = manufacturerId switch
        {
            1 => new List<CarModel> { new CarModel { Id = 101, Name = "卡罗拉" }, new CarModel { Id = 102, Name = "凯美瑞" } },
            2 => new List<CarModel> { new CarModel { Id = 201, Name = "高尔夫" }, new CarModel { Id = 202, Name = "迈腾" } },
            _ => new List<CarModel>()
        };
        return Task.FromResult(models);
    }

    // 实体类定义
    public class Manufacturer
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    public class CarModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

方案2：强制触发MudSelectItem的OnClick（不推荐） #

如果坚持要使用OnClick，可以通过阻止事件冒泡强制触发，但会破坏组件原生选中逻辑，需要手动处理选中状态和下拉关闭：

<MudSelect T="Manufacturer" 
           @bind-Value="SelectedManufacturer" 
           Label="选择制造商" 
           Variant="Variant.Outlined">
    @foreach (var manufacturer in Manufacturers)
    {
        <MudSelectItem Value="manufacturer" 
                       @onclick="() => HandleManufacturerClick(manufacturer)" 
                       @onclick:stopPropagation="true">
            @manufacturer.Name
        </MudSelectItem>
    }
</MudSelect>

@code {
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private async Task HandleManufacturerClick(Manufacturer manufacturer)
    {
        SelectedManufacturer = manufacturer;
        // 手动关闭下拉菜单
        await JSRuntime.InvokeVoidAsync("document.querySelector('.mud-select').click();");
        // 加载对应车型
        Models = await GetModelsByManufacturerIdAsync(manufacturer.Id);
    }
}

关键提示 #

• 优先采用方案1，完全遵循MudSelect的原生设计，避免自定义事件与组件内置逻辑冲突。
• 方案2存在潜在问题，比如多次点击导致状态不同步、下拉关闭异常等，仅作为特殊场景的备选。

内容的提问来源于stack exchange，提问作者Haris Tirić