React RadioGroup单选按钮无法选中问题排查求助

你的代码存在几个关键问题，导致单选按钮无法正常选中，逐个拆解说明：

1. RadioGroup的value类型错误 #

Material-UI的RadioGroup组件的value属性只需要接收当前选中的单选按钮的value字符串，而不是你定义的对象结构。你现在把{yes:"", no:"", idk:""}整个对象传给它，组件无法识别哪个选项处于选中状态。

2. 状态结构设计冗余 #

单选功能只需要记录当前选中的选项值即可，不需要给每个选项单独维护状态字段。比如直接用字符串类型的状态就足够：

const [selectedValue, setSelectedValue] = React.useState("");

3. handleChange逻辑的变量冲突与错误 #

你在handleChange里写了const{name:key,value} =e.target;，这里的value是事件目标的value（比如"yes"字符串），但后续你用setValue({...value, yes:value})时，这里的value已经被覆盖成了事件的字符串值，不是原来的状态对象，直接导致状态更新完全错误。

而且单选逻辑不需要逐个判断选项key，直接更新选中值即可，没必要维护多个键值对。

4. 重复绑定onChange事件 #

RadioGroup已经绑定了onChange事件，不需要再给每个<Radio>组件单独绑定，这会导致事件重复触发，干扰正常的选中逻辑。

5. FormControlLabel的name属性不统一 #

第一个FormControlLabel的name是"Yes"（大写Y），但你在handleChange里判断的是key==="yes"（小写），这会导致该选项的状态更新逻辑完全不生效。

修复后的完整代码 #

状态与事件处理代码 #

const [selectedValue, setSelectedValue] = React.useState("");

const handleChange = (e) => {
  // RadioGroup的onChange会直接返回选中的value，直接更新状态即可
  setSelectedValue(e.target.value);
};

渲染代码 #

<FormControl>
  <RadioGroup
    aria-labelledby="demo-controlled-radio-buttons-group"
    name="controlled-radio-buttons-group"
    value={selectedValue}
    onChange={handleChange}
  >
    <FormControlLabel
      value="yes"
      control={<Radio />}
      label="Yes"
    />
    <FormControlLabel
      value="no"
      control={<Radio />}
      label="No"
    />
    <FormControlLabel
      value="idk"
      control={<Radio />}
      label="I do not know"
    />
  </RadioGroup>
</FormControl>

额外说明 #

• RadioGroup会自动管理单选互斥逻辑，所以不需要给每个Radio单独绑定事件，也不需要维护多个状态字段。
• 如果你需要关联选中值和业务标识，selectedValue的字符串值（如"yes"）已经可以唯一对应选项，无需额外处理。

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