React新手求助：多步骤表单单选按钮处理及选中异常问题

1. 解决单选按钮可多选的问题 #

单选按钮实现互斥选择是HTML原生规则，同一组单选按钮必须设置相同的name属性。你的代码里没给单选按钮加name，浏览器无法识别它们属于同一组，所以会表现得像复选框。

2. 正确绑定handleChange处理单选按钮 #

你的handleChange是高阶函数，需要传入对应state的字段名，同时要给单选按钮设置value和checked属性，实现受控组件：

修改FormUserDetails.js的单选按钮代码 #

export class FormUserDetails extends Component {
  continue = (e) => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = (e) => {
    e.preventDefault();
    this.props.prevStep();
  }

  render() {
    const { handleChange, values } = this.props; // 解构出values
    return (
      <div className="box item2">
        {/* 同一组单选按钮设置相同name */}
        <div className="radio">
          <label>
            <input
              type="radio"
              name="type" // 统一name实现分组
              value="basic" // 设置选中后对应的值
              onChange={handleChange('type')} // 传入state字段名
              checked={values.type === 'basic'} // 绑定选中状态
            />
            Basic
          </label>
        </div>
        <div className="radio">
          <label>
            <input
              type="radio"
              name="type" // 和上一个单选按钮name一致
              value="advanced"
              onChange={handleChange('type')}
              checked={values.type === 'advanced'}
            />
            Advanced
          </label>
        </div>
        {/* 其他按钮和内容 */}
      </div>
    );
  }
}

关键说明 #

• name="type"：让浏览器识别这两个单选属于同一组，实现互斥选择
• value="basic"：指定选中该单选时，要存入state的值
• onChange={handleChange('type')}：调用高阶函数，传入state中对应的字段名，选中时会更新state里的type字段
• checked={values.type === 'basic'}：将单选按钮的选中状态和state绑定，确保UI和state同步，这是React受控组件的核心

这样修改后，单选按钮就能正常互斥选择，同时选中的值会正确存入组件state，和你之前处理文本输入的逻辑保持一致。

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