Blazor组件单选按钮互斥取消选中，如何实现多组件独立选择

问题 #

每个Blazor组件内都包含一组用于读写数据库的单选按钮，但选中某一组件内的单选按钮时，会取消其他组件中的单选按钮选中状态，需要实现各组件单选按钮独立选中、互不干扰。

原因 #

HTML单选按钮的name属性是全局作用域的——所有拥有相同name值的单选按钮会被浏览器视为同一组，因此跨组件的同名单选按钮会互相影响选中状态。你当前代码里所有单选按钮的name都固定为"number"，这是核心问题。

解决方案 #

给每个组件的单选按钮组生成唯一的name值，确保不同组件的单选按钮组name不重复，同时保证每个组件拥有独立的FileFilter实例（避免状态共享）。

修改步骤及代码示例 #

1. 在组件中添加唯一标识与独立状态实例：

// 生成唯一的单选按钮组名称，每个组件实例值都不同
private string RadioGroupName = Guid.NewGuid().ToString();
// 每个组件初始化独立的FileFilter，避免跨组件状态同步
private FileFilter FileFilter = new FileFilter();
private string filter = "all"; // 默认选中项

2. 修改单选按钮的name与id，同时修正label关联：

<label class="GroupTitle">Filters:</label><br/>
<input type="radio" name="@RadioGroupName" id="@($"{RadioGroupName}-all")" checked="@checkedRadio("all", FileFilter)" @oninput="@(() => UpdateFilter("all"))" /> 
<label for="@($"{RadioGroupName}-all")">Clear all files</label><br />  
<input type="radio" name="@RadioGroupName" id="@($"{RadioGroupName}-number")" checked="@checkedRadio("number", FileFilter)" @oninput="@(() => UpdateFilter("number"))" />
<label for="@($"{RadioGroupName}-number")">Based on number of files</label><br />    
<input type="radio" name="@RadioGroupName" id="@($"{RadioGroupName}-date")" checked="@checkedRadio("date", FileFilter)" @oninput="@(() => UpdateFilter("date"))" />    
<label for="@($"{RadioGroupName}-date")">Based on date of files</label><br />

3. 保留状态判断与更新方法（无需修改）：

private bool checkedRadio(string state, FileFilter Filter)
{
    return state == Filter.Filter;
}

private void UpdateFilter(string option)
{
    filter = option;
    FileFilter.Filter = option;
    // 此处添加读写数据库的逻辑，确保当前组件状态独立保存
}

关键说明 #

• 用Guid.NewGuid().ToString()生成唯一name，保证每个组件的单选按钮组完全独立，不会被浏览器归为同一组。
• 每个组件实例必须初始化独立的FileFilter对象，避免多个组件共享同一状态实例导致的联动问题。
• 修正label的for属性，使其与对应单选按钮的id匹配，提升用户交互体验。

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