Blazor组件<select>变更事件未触发问题求助

核心问题分析 #

1. DropDownFilter组件未触发回调：组件内的@bind="Item"仅更新内部属性，未在值变更时调用ItemChanged回调通知父组件。
2. 事件绑定语法错误：SearchFilters组件中ItemChanged="MakeChanged"使用了字符串引号，正确的方法绑定需要添加@前缀。

1. 修正DropDownFilter组件（确保值变更触发回调） #

推荐使用属性setter方式实现，更符合Blazor双向绑定的设计逻辑：

@rendermode InteractiveServer

<div>
    <span>
        <select @bind="Item">
            @foreach (var item in Items)
            {
                <option value="@item">@item</option>
            }
        </select>
    </span>
</div>

@code {
    [Parameter]
    public List<string> Items { get; set; } = [];

    private string _item = string.Empty;
    [Parameter]
    public string Item
    {
        get => _item;
        set
        {
            if (_item != value)
            {
                _item = value;
                // 触发回调通知父组件值变更
                _ = ItemChanged.InvokeAsync(value);
            }
        }
    }

    [Parameter]
    public EventCallback<string> ItemChanged { get; set; }
}

2. 修正SearchFilters组件（两种可选方式） #

方式一：使用Blazor双向绑定简化代码（推荐）

直接通过@bind-Item绑定到Make属性，无需手动定义事件处理方法：

@rendermode InteractiveServer

<h3>Search Filters</h3>

<section>
    <div>
        <DropDownFilter @bind-Item="Make" Items="Makes" />
    </div>
</section>

@code {
    public string Make { get; set; } = string.Empty;

    private List<string> Makes { get; set; } = ["Audi", "BMW", "Volvo"];
}

方式二：保留手动事件处理（需额外逻辑时使用）

修正事件绑定语法，添加@前缀绑定方法：

@rendermode InteractiveServer

<h3>Search Filters</h3>

<section>
    <div>
        <DropDownFilter @ItemChanged="MakeChanged" Items="Makes" Item="Make" />
    </div>
</section>

@code {
    public string Make { get; set; } = string.Empty;

    private List<string> Makes { get; set; } = ["Audi", "BMW", "Volvo"];

    private void MakeChanged(string make)
    {
        Make = make;
        // 此处可添加联动下拉框等额外逻辑
    }
}

关键注意点 #

• Blazor的@bind语法依赖组件提供{PropertyName}属性和对应的{PropertyName}Changed事件回调，二者缺一不可。
• 组件内部必须在属性值变更时主动调用EventCallback，否则父组件无法感知值变化。
• 绑定方法时必须添加@前缀，否则会被解析为普通字符串而非方法引用。

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