MUI与React：内联判断单选按钮选中状态并修改标签颜色

你的代码存在两个核心问题：

• 函数组件里不能用this.value，函数组件没有实例化的this对象，直接用当前单选框的目标值做判断即可
• 缺少onChange事件绑定来更新state，导致选中状态无法同步到value变量

修正后的完整代码示例 #

import React from 'react';
import { FormControl, FormLabel, RadioGroup, FormControlLabel, Radio } from '@mui/material';

const RadioDemo = () => {
  const [value, setValue] = React.useState("female");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <FormControl>
      <FormLabel>选项组</FormLabel>
      <RadioGroup value={value} onChange={handleChange}>
        <FormControlLabel
          sx={{ color: value === "female" ? "red" : "blue" }}
          value="female"
          control={<Radio />}
          label="Female"
        />
        <FormControlLabel
          sx={{ color: value === "bunn" ? "red" : "blue" }}
          value="bunn"
          control={<Radio />}
          label="Bunn"
        />
      </RadioGroup>
    </FormControl>
  );
};

export default RadioDemo;

关键说明 #

• 每个FormControlLabel的sx属性中，直接用value === "当前单选框的value值"做判断，比如第二个单选框就对比value === "bunn"
• 通过RadioGroup的onChange事件绑定处理函数，每次选中单选框时更新state里的value，标签颜色会实时响应状态变化
• 初始state设为"female"，页面加载时"Female"的标签会默认显示红色

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