本文详解 React 中 Radio Button 无法正常切换选中状态的根本原因：多个单选按钮必须共享相同的 name 属性才能构成逻辑组，否则浏览器无法识别其互斥关系，导致 checked 状态无法正确响应。
本文详解 react 中 radio button 无法正常切换选中状态的根本原因：多个单选按钮必须共享相同的 `name` 属性才能构成逻辑组，否则浏览器无法识别其互斥关系，导致 `checked` 状态无法正确响应。
在 React 应用中，使用 实现单选功能时，一个常见却极易被忽视的错误是：为每个单选按钮分配了不同的 name 值（如 "businessClass"、"economy"、"premEconomy"）。这会导致浏览器将它们视为完全独立的控件组，而非同一组互斥选项——因此无论点击哪个按钮，都无法“取消”其他按钮的选中态，checked 属性也无法按预期同步更新。
✅ 正确做法是：所有属于同一逻辑组的 radio 按钮，必须使用完全相同的 name 属性值（例如统一为 "travelClass"），而仅通过 id 和 value 区分具体选项。同时，checked 状态应由单一受控状态（如 airCraftLoadingSel.selectedClass）驱动，onChange 回调则负责更新该状态。
以下是修复后的标准实现示例：
{showGalleyF1 && (
<div style={{ display: 'flex', width: '100%' }} className="mySummary margTop36">
{/* Business Class */}
<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="business">
<span>Business Class</span>
</label>
<div className="dialog__description__radio">
<input
id="business"
type="radio"
name="travelClass" // ✅ 关键：所有 radio 共享同一 name
value="business"
checked={airCraftLoadingSel.selectedClass === 'business'}
onChange={(e) => onChangeClass(e.target.value)}
/>
<div className="control-indicator"></div>
</div>
</div>
</div>
</div>
</div>
{/* Economy */}
<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="economy">
<span>Economy</span>
</label>
<div className="dialog__description__radio">
<input
id="economy"
type="radio"
name="travelClass" // ✅ 同一组，name 必须一致
value="economy"
checked={airCraftLoadingSel.selectedClass === 'economy'}
onChange={(e) => onChangeClass(e.target.value)}
/>
<div className="control-indicator"></div>
</div>
</div>
</div>
</div>
</div>
{/* Premium Economy */}
<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="premium">
<span>Premium Economy</span>
</label>
<div className="dialog__description__radio">
<input
id="premium"
type="radio"
name="travelClass" // ✅ 统一 name 是核心前提
value="premium"
checked={airCraftLoadingSel.selectedClass === 'premium'}
onChange={(e) => onChangeClass(e.target.value)}
/>
<div className="control-indicator"></div>
</div>
</div>
</div>
</div>
</div>
</div>
)}配套的 onChangeClass 处理函数建议如下（确保状态更新可预测）：
const onChangeClass = (value: string) => {
setAirCraftLoadingSel(prev => ({
...prev,
selectedClass: value // ✅ 仅维护一个字段表示当前选中项
}));
};⚠️ 关键注意事项：
- name 属性是浏览器原生单选机制的唯一分组依据，React 无法绕过该规则；
- 避免使用 value={airCraftLoadingSel.xxx} + checked={airCraftLoadingSel.xxx} 的旧式映射（如原代码中 value={airCraftLoadingSel.businessClass}），这会将三个布尔字段耦合进单选逻辑，违背单选语义；
- id 必须唯一且与 label htmlFor 匹配，以保障可访问性（a11y）；
- 若需初始未选中状态，确保 selectedClass 初始化为 null 或 undefined，并用 === 严格比较。
遵循以上规范，即可确保单选按钮组行为符合用户直觉，并在 React 受控组件模式下稳定响应。
