如何正确实现单选按钮（Radio Button）的互斥选择与状态更新

本文详解 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 受控组件模式下稳定响应。