выбранные опции из радио и флажок не передают данные

Question

Я пытаюсь задать набор вопросов на нескольких страницах, поэтому мне нужно, чтобы выбранный ответ со страницы 1 и страницы 2 был передан на страницу 3, поскольку страница 3 похожа на страницу подтверждения, на которой будут показаны все выбранные ответы от последние 2 страницы.

Интерфейс успешно показан, хорошо, легко, но кажется, что данные вообще не передаются, о, и типы вопросов - радио и флажок, так что это довольно сложно для меня потому что эти 2 типа являются чем-то новым для меня (если textarea или обычный ввод, это просто).

Это mainpage.jsx

// MainForm.jsx
import React, { Component } from 'react';
import AircondQuantity from './AircondQuantity';
import ServicePackage from './ServicePackage';
import Confirmation from './Confirmation';
import Success from './Success';

class MainForm extends Component {
    state = {
        step: 1,
        oneAircond: ''
    }

    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 { oneAircond } = this.state;
        const values = { oneAircond };
        switch(step) {
        case 1:
            return <AircondQuantity 
                    nextStep={this.nextStep} 
                    handleChange = {this.handleChange}
                    values={values}
                    />
        case 2:
            return <ServicePackage 
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    handleChange = {this.handleChange}
                    values={values}
                    />
        case 3:
            return <Confirmation 
                    nextStep={this.nextStep}
                    prevStep={this.prevStep}
                    values={values}
                    />
        case 4:
            return <Success />
        }
    }
}

export default MainForm;

Это первая страница, AircondQuantity.jsx

// AircondQuantity.jsx
import React, { Component } from 'react';
import { Form, Button, FormRadio, Radio } from 'semantic-ui-react';

class AircondQuantity extends Component{

    saveAndContinue = (e) => {
        e.preventDefault()
        this.props.nextStep()
    }

    render(){
        const { values } = this.props;
        return(
            <Form >
                <h1 className="ui centered"> How many aircond units do you wish to service? </h1>

                <Form.Field>
                    <Radio
                        label='1'
                        name='oneAircond'
                        value='oneAircond'
                        //checked={this.state.value === this.state.value}
                        onChange={this.props.handleChange('oneAircond')}
                        defaultValue={values.oneAircond}
                    />
                </Form.Field>

                <Button onClick={this.saveAndContinue}> Next </Button>
            </Form>
        )
    }
}

export default AircondQuantity;

это следующая страница, ServicePackage.jsx

// ServicePackage.jsx
import React, { Component } from 'react';
import { Form, Button, Checkbox } from 'semantic-ui-react';
import { throws } from 'assert';

class ServicePackage 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"> Choose your package </h1>
            <Form.Field>
                <Checkbox 
                label={<label> Chemical Cleaning </label>} />
            </Form.Field>

            <Form.Field>
                <Checkbox 
                label={<label> Deep Cleaning </label>} />
            </Form.Field>

            <Button onClick={this.back}> Previous </Button>
            <Button onClick={this.saveAndContinue}> Next </Button>
        </Form>
        )
    }
}

export default ServicePackage;

это страница translation.jsx , на которой будут отображаться все выбранные параметры

// Confirmation.jsx
import React, { Component } from 'react';
import { Button, List } from 'semantic-ui-react';
import AircondQuantity from './AircondQuantity';

class Confirmation extends Component{
    saveAndContinue = (e) => {
        e.preventDefault();
        this.props.nextStep();
    }

    back  = (e) => {
        e.preventDefault();
        this.props.prevStep();
    }

    render(){
        const {values: { oneAircond }} = this.props;

        return(
            <div>
                <h1 className="ui centered"> Confirm your Details </h1>
                <p> Click Confirm if the following details have been correctly entered </p>
                <List>
                    <List.Item>
                        <List.Content> Aircond Quantity: {oneAircond}</List.Content>
                    </List.Item>
                </List>

                <Button onClick={this.back}>Back</Button>
                <Button onClick={this.saveAndContinue}>Confirm</Button>
            </div>
        )
    }
}

export default Confirmation;

Я очень новичок в использовании React, и я знаю, что у меня есть некоторые ошибки при передаче значений или переменных, но я не могу их обнаружить, потому что я новичок ie, так что вы можете мне помочь? спасибо.

Answer 1

Мне это не кажется правильным:

onChange={this.props.handleChange('oneAircond')}

Во-первых, он будет вызван мгновенно, прежде чем на самом деле будет вызван onChange, чтобы исправить это:

onChange={() => this.props.handleChange('oneAircond')}

Однако вам также необходимо передать событие изменения из переключателя, попробуйте следующее:

onChange={(event) => this.props.handleChange('oneAircond')(event)}

Функция handleChange, представленная ниже, представляет собой функцию, которая возвращает другую функцию, первая из которых принимает Строка 'oneAircond' (input) и возвращение функции, которая ожидает, что радиокнопка будет передавать event, что вам не хватает

handleChange = input => event => {
    this.setState({ [input] : event.target.value })
}

Answer 2

Хорошо, сначала я преобразую решение в хуки:

// MainForm.jsx
import React, { Component, useState, useEffect } from 'react';
import AircondQuantity from './AircondQuantity';
import ServicePackage from './ServicePackage';
import Confirmation from './Confirmation';
// import Success from './Success';

let MainForm = (props) => {

const [step, setStep] = useState(1)
const [input, setInput] = useState([])
const [oneAircond, setoneAircond] = useState('')

const nextStep = () => {
    setStep(step + 1)
}
const prevStep = () => {
    setStep(step - 1)
}

const handleChange = input => event => {
    setInput({ [input] : event.target.value})
    console.log(input)
}

const values = { oneAircond };

return(
    <React.Fragment>
          {(() => {
                switch(step) {
                    case 1:
                        return <AircondQuantity 
                                nextStep={nextStep} 
                                handleChange = {handleChange}
                                values={values}
                                />
                    case 2:
                        return <ServicePackage 
                                nextStep={nextStep}
                                prevStep={prevStep}
                                handleChange = {handleChange}
                                values={values}
                                />
                    case 3:
                        return <Confirmation 
                                nextStep={nextStep}
                                prevStep={prevStep}
                                values={values}
                                />
                    case 4:
                    // return <Success />
                    }
            })()}
    </React.Fragment>
)
}

export default MainForm;

Затем я преобразую AirCondQuantity.jsx и создаю новый компонент Radio.jsx , который содержит Структура радиосвязи (это компонент, в который мы вводим данные напрямую)

Так вот:

 // AircondQuantity.jsx
import React, { Component, useState } from 'react';
import { Form, Button, FormRadio, } from 'semantic-ui-react';
import Radio from './Radio';

let AircondQuantity = (props) => {

    const [radio, setRadio] = useState();

    const radioSelect = (name, e) => {
        localStorage.setItem('FirstStep', name);
        setRadio({ selectedRadio: name })   
        console.log(radio)
      }

      const saveAndContinue = (e) =>{
        e.preventDefault()
        props.nextStep()
      }

    return(
        <Form >
        <h1 className="ui centered"> How many aircond units do you wish to service? </h1>
        <Form.Field>
        <Radio 
                            handleRadioSelect={radioSelect} 
                            selectedRadio={radio} 
                            name ="oneAircond"/>
         <Radio 
                            handleRadioSelect={radioSelect} 
                            selectedRadio={radio} 
                            name ="twoAircond"/>
        </Form.Field>
        <Button onClick={saveAndContinue}> Next </Button>
    </Form>
    )
}


export default AircondQuantity;

Я добавил функцию, которая устанавливает элемент в LocalStorage + отправить его в состоянии радиосвязи

Дополнительным здесь является Радиокомпонент :

import React, { Component, useState } from 'react';

const Radio = (props) => {


    return (
        <div className = "RadioButton"
             onClick={() => props.handleRadioSelect(props.name)} >
                <div>
                        <input id={props.id} value={props.value} type="radio" checked={props.selectedRadio === props.name} />
                        {props.name}
                </div>
        </div>
    );
}
export default Radio;

Решение работает, несмотря на одно - оно не ' Не устанавливайте флажок, я понятия не имею, как это исправить.