Blazor中Bootstrap单选按钮组绑定Value参数的实现疑问

核心问题原因 #

Blazor遵循单向数据流，子组件不能直接修改父组件传递的[Parameter]属性，必须通过EventCallback通知父组件更新绑定值，这是你点击单选按钮后Value不更新的关键原因。

完整组件实现代码 #

创建BootstrapRadioGroup.razor组件，实现双向绑定逻辑：

<div class="btn-group" role="group" aria-label="Radio toggle button group">
    <!-- Yes选项 -->
    <input type="radio" class="btn-check" id="@($"{Id}_yes")" autocomplete="off"
           checked="@(Value == "Yes")"
           @onchange="() => ValueChanged.InvokeAsync("Yes")" />
    <label class="btn btn-outline-primary" for="@($"{Id}_yes")">Yes</label>

    <!-- No选项 -->
    <input type="radio" class="btn-check" id="@($"{Id}_no")" autocomplete="off"
           checked="@(Value == "No")"
           @onchange="() => ValueChanged.InvokeAsync("No")" />
    <label class="btn btn-outline-primary" for="@($"{Id}_no")">No</label>

    <!-- 可根据需求添加更多选项 -->
</div>

@code {
    [Parameter]
    public string Id { get; set; } = string.Empty;

    [Parameter]
    public string? Value { get; set; }

    // 必须定义对应的EventCallback用于通知父组件更新值
    [Parameter]
    public EventCallback<string?> ValueChanged { get; set; }
}

父组件中使用双向绑定 #

在需要使用该组件的父页面/组件中，通过@bind-Value语法实现双向绑定：

<BootstrapRadioGroup Id="response" @bind-Value="@SelectedResponse" />

<p>当前选中值：@SelectedResponse</p>

@code {
    // 定义绑定的属性，可设置默认值
    private string? SelectedResponse { get; set; } = "No";
}

优化：支持自定义选项（可选） #

如果需要动态添加选项，可扩展组件增加Options参数，实现更灵活的渲染：

<div class="btn-group" role="group" aria-label="Radio toggle button group">
    @foreach (var option in Options)
    {
        var optionId = $"{Id}_{option.ToLower().Replace(" ", "_")}";
        <input type="radio" class="btn-check" id="@optionId" autocomplete="off"
               checked="@(Value == option)"
               @onchange="() => ValueChanged.InvokeAsync(option)" />
        <label class="btn btn-outline-primary" for="@optionId">@option</label>
    }
</div>

@code {
    [Parameter]
    public string Id { get; set; } = string.Empty;

    [Parameter]
    public string? Value { get; set; }

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

    // 自定义选项参数，默认提供常用选项
    [Parameter]
    public List<string> Options { get; set; } = new() { "Yes", "No", "Maybe" };
}

父组件使用时可传入自定义选项：

<BootstrapRadioGroup Id="status" @bind-Value="@SelectedStatus" 
                     Options="new List<string> { "Active", "Inactive", "Pending" }" />

关键注意事项 #

• 永远不要直接修改子组件的[Parameter]属性，必须通过EventCallback触发父组件更新，否则绑定值不会同步。
• 使用@bind-Value时，Blazor会自动关联Value参数和ValueChanged回调，无需手动绑定事件。
• 单选按钮的checked状态通过比较Value与选项文本值来控制，确保选中状态与绑定值一致。

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