无法从子元素更新父组件中的单选按钮状态值

Question

我目前正在开发一个多页面清单应用程序，以提高常用清单程序的效率。

我的名为MainForm的父组件具有我的应用程序的所有状态。在我的第一个子元素中，我不得不填写一些文本输入。各州正在按计划更新和保存。我的第二页（或其他子元素）是我的核对清单开始的部分。问题是我的应用程序正在退出，但radiobutton值未发送到我的州。我也有一个问题，我可以选择'是'单选按钮然后选择'否'单选按钮，但我不能从'不'到'是'。 radioGroup21是给我提问的无线电组。所有其他州都在工作。

我的控制台中出现错误，说：

“复选框包含带有value和defaultValue道具的无线电类型的输入。输入元素必须是受控制的或不受控制的（指定值prop或defaultValue道具，但不能同时指定两者）。决定使用受控或不受控制的输入元素和删除其中一个道具。

我已经尝试删除我的Radio元素中的value标签和defaultValue行，但没有运气。我尝试在我的父元素中创建构造函数（props）但我仍然遇到问题。“

到目前为止，我已尝试删除单选按钮中的defaultValue，然后尝试删除值行。不幸的是，我没有帮助。

我还读到了受控和不受控制的输入。我已经尝试更改我的父组件状态，将它们放在构造函数（props）括号中。但没有运气。

我也尝试不使用handleChange函数并使用值为{radioButton21 ==='yes'}的setState函数，但这不起作用。

//Parent Component
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 => event => {
        this.setState({ [input] : event.target.value })
    }

    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;

-----------------------------------

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

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
                label = {'Yes'}
                name = {'radio21'}
                value = {'Yes'}
                onChange={this.props.handleChange('radioGroup21')}
                defaultValue={values.radioGroup21}
                />
              <Radio
                label = {'No'}
                name = {'radio21'}
                value = {'No'}
                onChange={this.props.handleChange('radioGroup21')}
                defaultValue={values.radioGroup21}
                />
            </Form.Field>
            <Button onClick={this.back}>Back</Button>
            <Button onClick={this.saveAndContinue}>Save And Continue </Button>
        </Form>
        )
    }
}

export default PrelimInspection

该应用程序正在渲染，布局正确。不幸的是，状态值没有被发送到父状态。

Answer 1

我检查了文档https://react.semantic-ui.com/addons/radio/#types-radio-group，我发现你错过了一些东西：

1.）无线电组件问checked道具（但你没有提供它）。

2.）然后要求你传递value，在你的情况下，它应该来自父组件：

<PrelimInspection
      valueFromParent={this.state["radioGroup21"]}
      nextStep={this.nextStep}
      handleChange={this.handleChange}
      values={values}
/>

所以在你的子组件'渲染中，取值：

render() {
    const { values, valueFromParent } = this.props;
    ...

3.）Radio的onChange值作为第二个参数（obj.value）传递。

<Radio
            label={'Yes'}
            name={'radio21'}
            value={"Yes"}
            checked={valueFromParent === 'Yes'}
            onChange={this.props.handleChange("radioGroup21")}
            ...
          />

所以你可以像这样选择所选的值：

// MainForm
  handleChange = input => (event, obj) => { // obj is the second param
    console.log("sendin here", input, obj.value);
    this.setState({ [input]: obj.value });
  };