子组件无法更新父组件中单选按钮状态值的问题

嘿，我来帮你拆解下当前遇到的问题，以及对应的修复方案：

首先，你的核心困扰来自两个关键问题：受控/非受控组件混用，以及Semantic UI React Radio组件的事件逻辑和原生input不一样，这两个问题叠加导致了单选组状态不同步、切换异常，还有控制台的报错。

1. 控制台报错的根源 #

你给Radio组件同时设置了value和defaultValue，React明确要求一个输入组件只能二选一：要么做受控组件（用value+onChange由父状态控制），要么做非受控组件（用defaultValue让DOM自己管理状态），同时用两者就会触发报错。

2. 单选状态无法同步的原因 #

Semantic UI React的Radio组件，它的onChange回调参数不是原生的event对象，而是(event, data)——其中data里才包含value、checked这些关键信息。你原来的handleChange是针对原生input写的，试图通过event.target.value拿值，这在Semantic UI组件里根本取不到正确内容，所以父组件的状态从来没被正确更新过。

3. 修复方案（推荐用方案一，更简洁） #

方案一：用Radio.Group统一管理单选组 #

Semantic UI提供了Radio.Group组件，能自动帮你管理组内单选按钮的选中状态，代码更简洁且不容易出错：

子组件PrelimInspection修改后的代码：

import React, { Component } from 'react';
import { Form, Button, Radio } from 'semantic-ui-react';

class PrelimInspection extends Component{
  saveAndContinue = (e) => {
    e.preventDefault();
    this.props.nextStep();
  }
  back = (e) => {
    e.preventDefault();
    this.props.prevStep();
  }
  render(){
    const { values } = this.props
    return(
      <Form color='blue' >
        <h1 className="ui centered">System Installation</h1>
        <Form.Field inline>
          <Form.Field>System Properly Supported</Form.Field>
          {/* 用Radio.Group包裹，统一绑定value和onChange */}
          <Radio.Group 
            name='radio21'
            value={values.radioGroup21}
            onChange={(e, { value }) => this.props.handleChange('radioGroup21')(value)}
          >
            <Radio label='Yes' value='Yes' />
            <Radio label='No' value='No' />
          </Radio.Group>
        </Form.Field>
        <Button onClick={this.back}>Back</Button>
        <Button onClick={this.saveAndContinue}>Save And Continue </Button>
      </Form>
    )
  }
}
export default PrelimInspection

方案二：调整父组件handleChange+手动控制单个Radio #

如果你不想用Radio.Group，也可以手动给每个Radio设置选中状态，并兼容事件逻辑：

第一步：修改父组件的handleChange，兼容两种事件参数

class MainForm extends Component {
  state = {
    step: 1,
    projectNumber: '',
    projectName: '',
    numberOfSystems: '',
    buildSheet: '',
    controlPhilosophy: '',
    projectLayoutDrawing: '',
    projSoftwareValidation: '',
    CppDrawing: '',
    radioGroup21: '',
  }
  nextStep = () => {
    const { step } = this.state
    this.setState({ step : step + 1 })
  }
  prevStep = () => {
    const { step } = this.state
    this.setState({ step : step - 1 })
  }
  // 调整handleChange，同时兼容原生input和Semantic UI的参数格式
  handleChange = input => (valueOrEvent) => {
    const value = typeof valueOrEvent === 'string' 
      ? valueOrEvent 
      : valueOrEvent.target?.value;
    this.setState({ [input]: value });
  }
  render(){
    // 原render代码保持不变
    const {step} = this.state;
    const { projectNumber, projectName, numberOfSystems, buildSheet , controlPhilosophy, projectLayoutDrawing, projSoftwareValidation, CppDrawing, radioGroup21 } = this.state;
    const values = { projectNumber, projectName, numberOfSystems, buildSheet, controlPhilosophy, projectLayoutDrawing, projSoftwareValidation, CppDrawing, radioGroup21 };
    switch(step) {
      case 1:
        return <ProjectInfo nextStep={this.nextStep} handleChange = {this.handleChange} values={values} />
      case 2:
        return <PrelimInspection nextStep={this.nextStep} prevStep={this.prevStep} handleChange = {this.handleChange} values={values} />
    }
  }
}
export default MainForm;

第二步：修改子组件的Radio为受控组件

<Form.Field inline>
  <Form.Field>System Properly Supported</Form.Field>
  <Radio 
    label={'Yes'} 
    name={'radio21'} 
    value={'Yes'} 
    onChange={(e, { value }) => this.props.handleChange('radioGroup21')(value)} 
    checked={values.radioGroup21 === 'Yes'} 
  />
  <Radio 
    label={'No'} 
    name={'radio21'} 
    value={'No'} 
    onChange={(e, { value }) => this.props.handleChange('radioGroup21')(value)} 
    checked={values.radioGroup21 === 'No'} 
  />
</Form.Field>

4. 额外小提示 #

父组件中radioGroup21的初始值是空字符串，如果你需要页面加载时默认选中某个选项，把初始值改成'Yes'或'No'就行。

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