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

Question

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

我的父组件 MainForm 拥有我的应用程序的所有状态。在我的第一个子元素中，我必须填写一些文本输入。状态正在按计划更新和保存。我的第二页（或其他子元素）是我的清单开始的部分。问题是我的应用程序正在渲染，但单选按钮值没有发送到我的状态。我也有一个问题，我可以选择“是”单选按钮，然后选择“否”单选按钮，但我无法从“否”变为“是”。 radioGroup21 是给我带来问题的广播组。所有其他州都在工作。

我的控制台出现错误提示：

“复选框包含带有 value 和 defaultValue 属性的 radio 类型的输入。输入元素必须是受控或不受控制的（指定 value 属性或 defaultValue 属性，但不能同时指定两者）。决定使用受控还是不受控输入元素并删除这些道具之一。

我尝试在我的 Radio 元素中删除 value 标签和 defaultValue 行，但没有成功。我尝试在我的父元素中创建构造函数（道具），但我仍然遇到问题。”

到目前为止，我已经尝试删除单选按钮中的 defaultValue，并且在尝试删除值行之后。不幸的是，这对我没有帮助。

我还阅读了有关受控和非受控输入的信息。我尝试更改我的父组件状态以将它们放在构造函数（道具）括号中。但没有运气。

我也尝试不使用 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.) Radio 组件询问了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 });
  };