从收音机和复选框中选择的选项未传递数据

Question

我试图通过多个页面提出一系列问题，所以我需要将第1页和第2页中选择的答案传递给第3页，因为第3页就像是确认页面，它将显示从第1页和第2页中选择的所有答案。过去2页。

接口已成功显示，很好，很简单，但是似乎根本没有数据通过，哦，问题类型是单选和复选框，所以这对我来说有点难，因为这两种类型对我来说都是新事物（如果是文本区域或普通输入，则很容易）。

这是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;

这是confirmation.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时，我知道在传递值或变量时遇到一些错误，但是我无法检测到它，因为我是新手，所以，您能帮我吗？谢谢。

Answer 1

这对我来说不合适：

Answer 2

确定，首先我将解决方案转换为钩子：