React项目从Bootstrap迁移至Material-UI：单选按钮组件问题求助

看起来你在从Bootstrap迁移到Material-UI单选按钮组件时踩了几个常见的坑，我帮你梳理下问题所在，再给出修复方案：

核心问题分析 #

对比你的Bootstrap原生代码和Material-UI实现，主要有这几个关键错误：

1. 缺少分组标识：Bootstrap通过name属性将同组单选按钮绑定，而你的Material-UI RadioButtonGroup没有设置name属性，导致单选按钮无法互斥选中。
2. 选中值绑定错误：你把selectedValue设为了questionID（分组ID），但它应该绑定的是当前选中的选项值，和原生input的value对应。
3. 缺少状态更新逻辑：Material-UI的单选组需要onChange事件来同步选中状态到组件内部状态，你的代码里没有处理这个逻辑，导致选中状态无法更新。
4. （可选）组件版本兼容：如果用的是Material-UI v5，RadioButtonGroup和RadioButton已经被废弃，需要改用新的组件体系。

修复方案（Material-UI v4及更早版本） #

假设你的组件用类组件实现，修复后的代码如下：

class YourQuestionComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化选中状态，可根据需求设置默认选中值
    this.state = {
      selectedChoice: ''
    };
    this.handleRadioChange = this.handleRadioChange.bind(this);
  }

  // 处理单选按钮选中变化
  handleRadioChange(event, value) {
    this.setState({ selectedChoice: value });
  }

  render() {
    const that = this;
    const iterator = ( 
      <RadioButtonGroup 
        // 设置name属性，对应Bootstrap的input name，实现分组互斥
        name={that.props.questionID}
        // 绑定当前选中的选项值
        selectedValue={that.state.selectedChoice}
        // 绑定状态更新函数
        onChange={that.handleRadioChange}
      > 
        {that.props.questionChoices.map((choice, index) => 
          <RadioButton 
            // 循环渲染必须加key，避免React警告
            key={index}
            // 选项值和原生input一致
            value={choice} 
            label={choice} 
          /> 
        )} 
      </RadioButtonGroup> 
    );

    return <div>{iterator}</div>;
  }
}

修复方案（Material-UI v5版本） #

如果你的项目用的是最新的Material-UI v5，官方已经废弃了RadioButtonGroup和RadioButton，改用RadioGroup+Radio的组合，配合FormControl容器组件使用更规范：

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

class YourQuestionComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedChoice: ''
    };
    this.handleRadioChange = this.handleRadioChange.bind(this);
  }

  handleRadioChange(event) {
    this.setState({ selectedChoice: event.target.value });
  }

  render() {
    const that = this;
    const iterator = (
      <FormControl component="fieldset">
        {/* 可选：添加问题标题 */}
        <FormLabel component="legend">你的问题</FormLabel>
        <RadioGroup
          name={that.props.questionID}
          value={that.state.selectedChoice}
          onChange={that.handleRadioChange}
        >
          {that.props.questionChoices.map((choice, index) => (
            <FormControlLabel
              key={index}
              value={choice}
              control={<Radio />}
              label={choice}
            />
          ))}
        </RadioGroup>
      </FormControl>
    );

    return <div>{iterator}</div>;
  }
}

验证要点 #

修复后你可以验证这几点：

• 单选按钮是否能互斥选中
• 选中状态是否能同步到组件状态
• 提交表单时是否能获取到正确的选中值

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