Ошибка обновления значения состояния переключателя в родительском компоненте из дочернего элемента - PullRequest
Новая
       10

Ошибка обновления значения состояния переключателя в родительском компоненте из дочернего элемента

1 голос
/ 30 марта 2019

В настоящее время я работаю в приложении многостраничного контрольного списка, чтобы сделать общую процедуру контрольного списка более эффективной.

мой родительский компонент с именем MainForm имеет все состояния для моего приложения.В моем первом дочернем элементе я должен был заполнить некоторые текстовые поля.Состояния обновляются и сохраняются в соответствии с планом.Моя вторая страница (или другой дочерний элемент) была той частью, где начинался мой контрольный список.Проблема в том, что мое приложение находится в режиме ожидания, но значение радиокнопки не отправляется в мое состояние.У меня также есть проблема, когда я могу выбрать переключатель «да», а затем переключатель «нет», но я не могу перейти от «нет» к «да».radioGroup21 - это радиогруппа, которая доставляет мне проблемы.Все остальные состояния работают.

Я получаю сообщение об ошибке в консоли, в котором говорится:

"Флажок содержит входные данные типа radio с реквизитами value и defaultValue. Входные элементы должны быть либоуправляемый или неконтролируемый (укажите значение prop или defaultValue prop, но не оба). Выберите между использованием контролируемого или неконтролируемого элемента ввода и удалите один из этих реквизитов.

Я пытался удалить тег значенияи строку defaultValue в моих элементах Radio, но не повезло. Я пытался создать конструктор (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

Приложение выполняет рендеринг и верный макет.К сожалению, значения состояния не отправляются в родительское состояние.

1 Ответ

0 голосов
/ 30 марта 2019

Я проверил документацию 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.) Значение 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 });
  };
...