React Semantic UI Radio选中异常：同值多选仅显示一个勾选

问题现象 #

• 维护一个问题列表，每个问题配有两个Radio选项：「Single Select」和「Multiple Select」
• 当多个问题选择相同选项（比如都选Single Select）时，只有一个问题的Radio显示勾选状态
• 当不同问题选择不同选项时，勾选状态显示正常

截图示例：两个问题均选中Single Select，但仅其中一个Radio显示勾选标记。

相关代码 #

<SetUpContainer marginTop>
  <SegmentTitle>
    Multiple choice options
  </SegmentTitle>
  <Radio
    value={question.type}
    name="Single Select"
    label="Single select - participants can select one option"
    checked={question.type === 'single_select'}
    onClick={() => handleSelectionTypeChange(indexQuestion, 'single_select')}
  />
  <Radio
    value={question.type}
    name="Multiple Select"
    label="Multiple select - participants can select one or more options"
    checked={question.type === 'multiple_select'}
    onClick={() => handleSelectionTypeChange(indexQuestion, 'multiple_select')}
  />
</SetUpContainer>

成因说明 #

问题核心在于Radio组件的name属性设置：

• 你给所有问题的「Single Select」Radio都用了相同的name="Single Select"，所有「Multiple Select」Radio都用了相同的name="Multiple Select"
• 按照HTML原生规则，拥有相同name值的Radio会被归为同一组，同一组内的Radio只能同时选中一个
• 所以当多个问题选了相同选项时，浏览器会把这些同name的Radio当成一组，自动取消其他Radio的选中状态，最终只有一个能显示勾选标记

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