Material-UI 的 Radio 单选框怎么绑定值不生效？

❤秀兰提问于 2026-03-17 13:18:20 阅读 4

组件

我用 Material-UI 写了个单选组，但选了选项后 state 没变化，控制台也没报错。明明写了 onChange 事件，但就是不触发。

我试过把 value 设成字符串和数字，也检查了 checked 属性是不是和 state 对得上，还是不行。代码大概是这样：

const [value, setValue] = useState('option1');
return (
  <RadioGroup value={value} onChange={(e) => setValue(e.target.value)}>
    <FormControlLabel value="option1" control={<Radio />} label="选项1" />
    <FormControlLabel value="option2" control={<Radio />} label="选项2" />
  </RadioGroup>
);

我来解答赞 4 收藏

反馈

1 条解答

司徒艳丽 Lv1

这代码本身没毛病的，你确定是 RadioGroup 和 FormControlLabel 都从 @material-ui/core 正确导入了？

常见坑就这几个：

1. 检查导入路径，新版 MUI（v5）是 @mui/material，老版才是 @material-ui/core。如果你用的是新版却按老版导入，组件根本不会正常工作。

2. 确认 RadioGroup 的 onChange 确实没触发，可以在回调里打个 console.log 看看。

3. 看看外层有没有什么阻止事件冒泡的东西。

如果以上都没问题，把完整的组件代码和导入语句贴出来看看，光看这一段是真看不出问题在哪——这段代码本身是能跑能用的。

2026-03-17 15:07