Question

我目前正在使用一个多页清单应用程序，以使常见的清单程序更高效。

我的父组件MainForm拥有我应用程序的所有状态。在我的第一个子元素中，我不得不填写一些文本输入。状态正在按计划更新和保存。我的第二页（或其他子元素）是清单开始的部分。问题是我的应用程序正在运行，但单选按钮值未发送到我的状态。我也遇到了一个问题，我可以选择“是”单选按钮，然后选择“否”单选按钮，但是我不能从“否”转到“是”。 radioGroup21是给我带来麻烦的无线电组。其他所有州都在工作。

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

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

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

到目前为止，我已经尝试在单选按钮中以及在尝试删除值行之后删除defaultValue。不幸的是，我对此无济于事。

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

我还尝试过不使用handleChange函数，而将setState函数的值设置为{radioButton21 ==='yes'}，但这是行不通的。

//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 });
  };

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

1 个答案: