React中首次点击单选按钮选中错误问题排查

场景与代码 #

正在构建分步表单系统，某一步包含一组单选按钮组件，核心渲染代码如下：

{map(packages, (pkg, index) => {
    return (
    <label style={{
        position: "relative",
        zIndex: 9
    }} for={fieldId + `-${index}`}>
        <input
            style={{
                accentColor: '#3ebd93',
                width: '35px',
                height: '35px',
            }}
            id={fieldId + `-${index}`}
            type={"radio"}
            name={"choose_package"}
            onChange={e => handleInput(e, pkg, index, fieldId)}
            checked={checked || false}
        />
    )
    </label>
    })
}

渲染后每个单选框都对应绑定了带唯一ID的label，且所有单选框name值统一为choose_package，单个输入框的HTML示例：

<label for="featured-listing-0" style="position: relative; z-index: 9;">
  <input id="featured-listing-0" type="radio" name="choose_package" style="accent-color: rgb(62, 189, 147); width: 35px; height: 35px;">
</label>

异常表现：首次点击任意单选框时，DOM中总是显示最后一个单选按钮被选中；但onChange函数能正确打印点击项的唯一ID，再次点击即可正常选中目标选项。

原因分析 #

所有单选按钮的checked属性都绑定了同一个布尔类型的checked变量，首次点击时会触发以下逻辑：

1. 点击后触发onChange，将checked变量更新为true；
2. 由于所有单选框的checked状态都依赖这个变量，导致所有单选框的checked都被设为true；
3. 但浏览器对同name的单选框有默认规则：只会保留最后一个被设置为true的选项的选中状态，因此视觉上显示最后一个单选框被选中；
4. 再次点击时，checked变量会根据业务逻辑更新为对应选项的唯一标识（而非单纯布尔值），此时只有目标选项的checked状态会匹配，因此显示正常。

解决方案 #

将checked变量从布尔值改为当前选中项的唯一标识（比如选项的index或pkg.id），然后在每个单选框的checked属性中，判断当前项的标识是否与选中标识一致：

修改后的核心代码：

{map(packages, (pkg, index) => {
    return (
    <label style={{
        position: "relative",
        zIndex: 9
    }} htmlFor={fieldId + `-${index}`}> {/* React中label需用htmlFor替代原生for */}
        <input
            style={{
                accentColor: '#3ebd93',
                width: '35px',
                height: '35px',
            }}
            id={fieldId + `-${index}`}
            type={"radio"}
            name={"choose_package"}
            onChange={e => handleInput(e, pkg, index, fieldId)}
            checked={selectedIndex === index} // 用选中项的index判断状态
        />
    )
    </label>
    })
}

同时调整handleInput函数，将状态更新为当前点击项的标识：

const handleInput = (e, pkg, index, fieldId) => {
    // 其他业务逻辑...
    setSelectedIndex(index); // 保存选中项的index，而非设置为布尔值true
};

额外注意：React中label的关联属性是htmlFor，而非原生HTML的for，虽然部分场景下for能生效，但严格遵循React规范可避免潜在兼容问题。

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