Blazor中如何为InputRadio单选按钮设置默认选中状态

问题根因 #

Blazor 内置的 InputRadio、InputRadioGroup 属于表单绑定组件，选中状态完全由 InputRadioGroup 绑定的属性值决定，你手动给 InputRadio 添加原生的 checked 属性会被组件的绑定逻辑覆盖，所以不会生效。

解决方案 #

你只需要在初始化 TestModel 实例的时候，给绑定的 Number 属性赋值为第一个单选框对应的 Value 值（也就是1）即可实现默认选中。

修改后的代码示例：

@page "/Test"

<div>
    <EditForm Model="@_model">
       <InputRadioGroup @bind-Value="_model.Number"> 
            <div>
                <InputRadio id="1radio" Value="1" />
                <label for="1radio">1</label>
            </div>

            <div>
                <InputRadio id="2radio" Value="2" />
                <label for="2radio">2</label>
            </div>
        </InputRadioGroup>

    </EditForm> 
</div>


@code {
    private TestModel _model = new()
    {
        Number = 1
    };
}

注意事项 #

所有 Input 开头的 Blazor 内置表单组件，状态都优先响应绑定的数据源，不要使用原生 HTML 的状态属性（比如 checked、selected）直接控制组件状态，避免出现逻辑冲突。

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