React选择其他单选按钮时默认选中项重复触发问题求解

当前实现存在两个核心问题，直接导致单选按钮组行为异常：

1. 第一个单选按钮写死了固定值的checked属性，在React的渲染逻辑中，只要组件重渲染就会强制把该选项设为选中状态，属于受控组件未绑定状态与更新事件的典型错误。点击其他选项触发组件重渲染时，默认选项会被强制重置选中，就会出现默认选项反复触发、其他选项选不中的现象。
2. 错误给<label>标签添加了checked属性，label元素本身不支持该属性，属于无效DOM属性，会触发控制台警告且不产生任何实际效果。

根据业务场景二选一即可：

方案1：受控组件实现（React官方推荐，适合需要获取/联动选中值的场景） #

受控组件的核心是把选中状态交给React状态统一管理：

• 声明组件状态存储当前选中的选项值，初始值设为第一个选项的value，实现默认选中
• 给同组所有单选按钮绑定onChange事件，点击时同步更新状态值
• 每个单选按钮的checked属性做动态判断：当前选项value与状态值相等时才为true
• 移除label上所有无效的checked属性

完整实现代码：

import { useState } from 'react';

export default function ProcessCampaign() {
  // 状态默认值设为第一个选项的value，实现默认选中
  const [selectedOption, setSelectedOption] = useState('option1');

  const handleOptionChange = (e) => {
    setSelectedOption(e.target.value);
  };

  return (
    <div>
      <div className="form-check">
        <input
          type="radio"
          name="exampleRadios"
          id="exampleRadios1"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={handleOptionChange}
        />
        <label className="form-check-label" htmlFor="exampleRadios1">
          MAILING
        </label>
      </div>
      <div className="form-check">
        <input
          type="radio"
          name="exampleRadios"
          id="exampleRadios2"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={handleOptionChange}
        />
        <label className="form-check-label" htmlFor="exampleRadios2">
          EMAIL
        </label>
      </div>
      <div className="form-check">
        <input
          type="radio"
          name="exampleRadios"
          id="exampleRadios3"
          value="option3"
          checked={selectedOption === 'option3'}
          onChange={handleOptionChange}
        />
        <label className="form-check-label" htmlFor="exampleRadios3">
          SIMULATION
        </label>
      </div>
      <div className="form-check">
        <input
          type="radio"
          name="exampleRadios"
          id="exampleRadios4"
          value="option4"
          checked={selectedOption === 'option4'}
          onChange={handleOptionChange}
        />
        <label className="form-check-label" htmlFor="exampleRadios4">
          ONO GENERIC
        </label>
      </div>
      <div className="form-check">
        <input
          type="radio"
          name="exampleRadios"
          id="exampleRadios5"
          value="option5"
          checked={selectedOption === 'option5'}
          onChange={handleOptionChange}
        />
        <label className="form-check-label" htmlFor="exampleRadios5">
          SUPRESSION ASSIGNMENT
        </label>
      </div>
    </div>
  )
}

方案2：非受控组件实现（适合不需要实时读取选中值的简单场景） #

如果不需要通过React状态管控选中逻辑，就不要用固定值的checked属性，改用React提供的defaultChecked标记默认选中项，让浏览器原生处理单选互斥逻辑即可：

• 将第一个单选按钮上写死的checked替换为defaultChecked
• 移除label上的无效checked属性
• 同组所有单选按钮保持name属性一致即可，不需要额外绑定事件

核心修改片段：

<div className="form-check">
  <input
    type="radio"
    name="exampleRadios"
    id="exampleRadios1"
    value="option1"
    defaultChecked {/* 仅标记首次渲染的默认选中状态，后续切换交给原生DOM处理 */}
  />
  <label className="form-check-label" htmlFor="exampleRadios1">
    MAILING
  </label>
</div>
{/* 其余单选按钮无需添加checked/defaultChecked属性，保持name一致即可 */}

• 同组单选按钮必须保证name属性值完全相同，浏览器才会识别为同一互斥组，当前代码这块的写法是符合要求的
• React表单元素规则：如果给表单元素（input/select/textarea）写了固定值的checked/value属性，就会被判定为受控组件，必须配套onChange事件和状态更新逻辑，否则会出现无法交互、状态重置的问题
• 不要混用checked和defaultChecked属性，同一个表单元素只能选其中一种写法，否则会引发渲染异常
• 不要给DOM元素添加本身不支持的属性，避免控制台报错和无效逻辑

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