React中MUI单选按钮无法选中，handleChange未触发问题排查

根据你提供的代码，这里列出几个最可能导致问题的原因：

1. RadioGroup的onChange参数处理错误（MUI v5版本问题） #

如果你用的是Material-UI v5，RadioGroup的onChange回调会传递两个参数：event和选中的newValue，而非仅通过event.target.value获取值。当前写法可能导致状态更新失败，看起来像是没选中；极端场景下还会因event.target.value不存在报错，间接导致事件处理异常。

修正后的handleChange：

const handleChange = (event, newValue) => {
  setValue(newValue);
};

2. FormControl缺少语义化组件属性 #

Material-UI的FormControl需要明确设置component="fieldset"，FormLabel设置component="legend"——这不仅是语义化要求，还能确保组件内部的事件和状态管理正常工作。你的代码未添加这些属性，可能导致RadioGroup的事件无法正确冒泡或被捕获。

修正后的FormControl和FormLabel：

<FormControl component="fieldset">
  <FormLabel component="legend" id="demo-controlled-radio-buttons-group">
    时间范围
  </FormLabel>
  {/* 剩下的RadioGroup代码 */}
</FormControl>

3. 点击事件被遮挡或阻止 #

检查组件是否存在以下情况：

• 父元素或叠加元素设置了pointer-events: none，阻止点击事件传递
• 有绝对/固定定位的元素覆盖在单选按钮上方，导致实际点击不到Radio组件
• 自定义CSS给Radio或FormControlLabel添加了opacity: 0、z-index: -1等属性，让按钮不可点击

4. 状态作用域问题 #

确保useState和handleChange定义在同一个函数组件内部，不要错误地放在组件外部、useEffect回调中；同时避免因闭包问题拿到旧的状态值（这种情况通常会导致状态更新后不渲染，也可能间接影响事件触发）。

5. Material-UI版本冲突 #

确认你的@mui/material包是稳定版，避开带有已知RadioGroup事件bug的开发版或旧版本。可尝试更新到最新稳定版：

npm install @mui/material@latest

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