本文详解 React 中单选按钮无法正常切换的问题根源：多个 radio 按钮必须共享相同的 name 属性才能构成逻辑组，否则浏览器无法识别其互斥关系，导致 checked 状态无法正确响应和更新。
本文详解 react 中单选按钮无法正常切换的问题根源：多个 radio 按钮必须共享相同的 `name` 属性才能构成逻辑组，否则浏览器无法识别其互斥关系，导致 `checked` 状态无法正确响应和更新。
在 React 应用中，使用 实现单选功能时，一个常见却极易被忽视的错误是：为每个单选按钮设置了不同的 name 值（如 "businessClass"、"economy"、"premEconomy"）。这会导致浏览器将它们视为完全独立的控件组，而非同一组互斥选项——结果就是：无论点击哪个按钮，都无法取消其他选项的选中状态，checked 属性也无法按预期联动更新。
✅ 正确做法是：所有属于同一逻辑组的 radio 按钮，必须使用完全相同的 name 属性值；而 id 和 value 则应各不相同，用于唯一标识选项及提交值。
以下为修复后的代码示例（关键修改已高亮）：
{showGalleyF1 && (
<div style={{ display: 'flex', width: '100%' }} className="mySummary margTop36">
<div className="flexCol justifyContentSpaceEvenly">
<div className="dialog__container_item input-container margRight">
<div className="dialog__description_config">
<div style={{ display: 'flex' }}>
<label className="control control-radio margTop5 margRight" htmlFor="1">
Business Class
</label>
<div className="dialog__description__radio">
<input
id="1"
type="radio"
name="cabinClass" // ✅ 统一 name：所有选项共用同一组名
value="business"
checked={airCraftLoadingSel.cabinClass === 'business'}
onChange={() => onChangeClass('business')}
/>
<div className="control-indicator"></div>
</div>
</div>
</div>
</div>
</div>
<div className="flexCol justifyContentSpaceEvenly">
<div className="dialog__container_item input-container margRight">
<div className="dialog__description_config">
<div style={{ display: 'flex' }}>
<label className="control control-radio margTop5 margRight" htmlFor="2">
Economy
</label>
<div className="dialog__description__radio">
<input
id="2"
type="radio"
name="cabinClass" // ✅ 同样为 "cabinClass"
value="economy"
checked={airCraftLoadingSel.cabinClass === 'economy'}
onChange={() => onChangeClass('economy')}
/>
<div className="control-indicator"></div>
</div>
</div>
</div>
</div>
</div>
<div className="flexCol justifyContentSpaceEvenly">
<div className="dialog__container_item input-container margRight">
<div className="dialog__description_config">
<div style={{ display: 'flex' }}>
<label className="control control-radio margTop5 margRight" htmlFor="3">
Premium Economy
</label>
<div className="dialog__description__radio">
<input
id="3"
type="radio"
name="cabinClass" // ✅ 三者 name 完全一致
value="premiumEconomy"
checked={airCraftLoadingSel.cabinClass === 'premiumEconomy'}
onChange={() => onChangeClass('premiumEconomy')}
/>
<div className="control-indicator"></div>
</div>
</div>
</div>
</div>
</div>
</div>
)}同时，配套的 onChangeClass 处理函数建议设计为接收 value 参数，统一更新状态：
const onChangeClass = (value: string) => {
setAirCraftLoadingSel(prev => ({
...prev,
cabinClass: value // ✅ 单一字段存储当前选中值
}));
};⚠️ 注意事项：
- name 是浏览器原生表单分组机制的核心，React 无法绕过它实现 radio 互斥；
- checked 属性必须严格受控（即由 state 驱动），避免混合使用受控与非受控模式；
- value 应为字符串字面量（如 'business'），而非引用对象属性（如 {airCraftLoadingSel.businessClass}），否则易引发类型/值匹配错误；
- 若需支持「无默认选中」，初始 state 中 cabinClass 可设为 null 或 undefined，并确保 checked 表达式使用严格相等（===）判断。
总结：Radio 按钮的互斥行为由 HTML 规范定义，React 的职责是正确绑定状态。牢记 “同组 name，异值 value，唯一 checked 源”，即可彻底解决切换失效问题。
