javascript - 从单选按钮和复选框中选择的选项不传递数据

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方面非常新，我知道我在传输值或变量时遇到一些错误，但我无法检测到它，因为我是新手，所以em，你能帮忙吗我？谢谢。

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