React条件渲染单选按钮无法实现状态切换问题排查

我设置了3个带条件渲染的radio按钮，初始状态都是false，想通过input的onChange事件切换状态，但没法完成切换。当前label和radio input用行内布局，请问实现方式有哪些问题？

现有代码 #

{ showGalleyF1&& <div  style={{display:'flex',float:'left',width:'100%'}} className='mySummary margTop36'>
   <div class="flexCol justifyContentSpaceEvenly">
            <div class=" dialog__container_item input-container margRight">
              <div class="dialog__description_config">
                <div style={{display:'flex'}}>
              <label class="control control-radio margTop5 margRight" for="1">  <span>Business Class</span> </label>
              <div className={`dialog__description__radio`}>
                <input  id="1" type="radio"      
                 name="businessClass"
                 value= {airCraftLoadingSel.businessClass}
                 checked={airCraftLoadingSel.businessClass}
                 onChange={()=>onChangeClass()} />
                

                <div class="control-indicator"></div>
                  </div>
               </div>
              </div>
            </div>
          </div>
          <div class="flexCol justifyContentSpaceEvenly">
            <div class=" dialog__container_item input-container margRight">
              <div class="dialog__description_config">
              <div style={{display:'flex'}}>
              <label class="control control-radio margTop5 margRight" for="2">  <span>Economy</span> </label>
              <div className={`dialog__description__radio`}>
                <input  id="2" type="radio"      
                 name="economy"
                 value= {airCraftLoadingSel.economy}
                 checked={airCraftLoadingSel.economy}
                 onChange={onChangeClass} />
                <div class="control-indicator"></div>
                  </div>
               </div>
              </div>
            </div>
          </div>
          <div class="flexCol justifyContentSpaceEvenly">
            <div class=" dialog__container_item input-container margRight">
              <div class="dialog__description_config">
              <div style={{display:'flex'}}>
              <label class="control control-radio margTop5 margRight" for="3">  <span>Premium Economy</span> </label>
              <div className={`dialog__description__radio`}>
                <input  id="3" type="radio"      
                 name="premEconomy"
                 value= {airCraftLoadingSel.premEconomy}
                 checked={airCraftLoadingSel.premEconomy}
                onChange={onChangeClass} />
                <div class="control-indicator"></div>
                  </div>
               </div>
              </div>
            </div>
          </div>
</div>}

核心问题拆解 #

• Radio组标识错误：三个radio的name属性各不相同（businessClass、economy、premEconomy），浏览器会把它们当成独立控件，既无法实现互斥选择，也会让状态管理逻辑完全混乱。同一组单选按钮必须共用同一个name值。

• 状态绑定逻辑错误：

  • value属性不该绑定状态变量airCraftLoadingSel.xxx，应该设置固定的选项标识（比如"business"、"economy"、"premiumEconomy"）；
  • checked属性的判断逻辑错误，不能直接绑定布尔状态，应该判断当前选中的状态值是否等于该radio的固定value（比如checked={airCraftLoadingSel.selectedClass === "business"}）。

• 事件处理逻辑缺失：onChangeClass方法没有接收事件参数，也没有明确的状态更新逻辑，不知道要把哪个值设置为选中状态。正确的做法是在onChange中获取当前radio的value，然后更新到统一的状态变量里。

• 布局交互隐患：label的for属性绑定了input的id，但input被嵌套在dialog__description__radio容器内，部分浏览器可能会因为DOM层级问题，导致点击label无法触发input的change事件。建议把input直接放在label内部，或者确保label和input的DOM关系更直接。

修正后的示例代码 #

// 假设状态定义如下
const [selectedClass, setSelectedClass] = useState(null); // 初始设为null，而非多个布尔值

{ showGalleyF1&& <div style={{display:'flex',float:'left',width:'100%'}} className='mySummary margTop36'>
  {/* 统一用同一个name，确保是同一组单选 */}
  <div class="flexCol justifyContentSpaceEvenly">
    <div class=" dialog__container_item input-container margRight">
      <div class="dialog__description_config">
        <div style={{display:'flex'}}>
          {/* 把input放在label内部，避免for属性的层级问题 */}
          <label class="control control-radio margTop5 margRight">
            <span>Business Class</span>
            <div className={`dialog__description__radio`}>
              <input type="radio"      
                name="cabinClass"
                value="business"
                checked={selectedClass === "business"}
                onChange={(e) => setSelectedClass(e.target.value)} />
              <div class="control-indicator"></div>
            </div>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="flexCol justifyContentSpaceEvenly">
    <div class=" dialog__container_item input-container margRight">
      <div class="dialog__description_config">
        <div style={{display:'flex'}}>
          <label class="control control-radio margTop5 margRight">
            <span>Economy</span>
            <div className={`dialog__description__radio`}>
              <input type="radio"      
                name="cabinClass"
                value="economy"
                checked={selectedClass === "economy"}
                onChange={(e) => setSelectedClass(e.target.value)} />
              <div class="control-indicator"></div>
            </div>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="flexCol justifyContentSpaceEvenly">
    <div class=" dialog__container_item input-container margRight">
      <div class="dialog__description_config">
        <div style={{display:'flex'}}>
          <label class="control control-radio margTop5 margRight">
            <span>Premium Economy</span>
            <div className={`dialog__description__radio`}>
              <input type="radio"      
                name="cabinClass"
                value="premiumEconomy"
                checked={selectedClass === "premiumEconomy"}
                onChange={(e) => setSelectedClass(e.target.value)} />
              <div class="control-indicator"></div>
            </div>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>}

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