Blazor InputRadioGroup添加Bootstrap类后单选按钮点击无响应

两个核心问题导致单选按钮交互失效：

• 代码存在笔误：添加Bootstrap类后的代码中，第二、第三个InputRadio组件的Value属性全部错写为GUID_CONST_1，和第一个选项值完全一致，即使触发选中逻辑也无法切换到不同选项值。
• Bootstrap 4自定义单选样式的交互逻辑和现有代码不匹配：Bootstrap 4的custom-control-input类会将原生input元素设置为透明、绝对定位且z-index低于label，用户视觉上点击的是label元素而非原生input。这套样式要求label必须通过for属性和input的id一一绑定，点击label时才能触发原生input的选中事件。你的代码中既没有给InputRadio设置唯一id，也没有给label添加匹配的for属性，点击操作无法触发选中逻辑。
  未添加Bootstrap类时原生input没有被样式遮挡，用户可以直接点到input元素，所以交互正常。

1. 修正三个选项的Value绑定错误，分别对应三个不同的GUID常量
2. 给每个InputRadio设置页面内唯一的id，给同级label添加匹配的for属性

修复后的可运行代码：

<InputRadioGroup 
    TValue="Guid?"
    Value="guidVal"
    ValueChanged="e => 
    {
        guidVal = e;
    }"
    ValueExpression="() => guidVal">
    <div class="custom-control custom-radio custom-control-inline">
        <InputRadio id="radio_1" class="custom-control-input" Value="GUID_CONST_1" />
        <label class="custom-control-label" for="radio_1">First</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <InputRadio id="radio_2" class="custom-control-input" Value="GUID_CONST_2" />
        <label class="custom-control-label" for="radio_2">Second</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <InputRadio id="radio_3" class="custom-control-input" Value="GUID_CONST_3" />
        <label class="custom-control-label" for="radio_3">Third</label>
    </div>
</InputRadioGroup>

如果是循环渲染单选选项，直接用选项的主键或者随机字符串拼接id即可，保证同一页面内id不重复就可以，不需要额外写JS干预交互，Blazor内置的事件绑定可以正常工作。

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