從收音機和復選框中選擇的選項不傳遞數據

Question

我正在嘗試通過多個頁面提出一組問題，因此我需要將第 1 頁和第 2 頁中的選定答案傳遞到第 3 頁，因為第 3 頁就像確認頁面，它將顯示過去 2 中的所有選定答案頁。

界面顯示成功了，嗯，簡單，但是好像根本就沒有數據傳遞，哦，問題的類型是單選和復選框，所以對我來說有點困難，因為這兩種類型對我來說是新的（如果textarea 或正常輸入，很容易）。

這是主頁.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;

我在使用運動很新的，我知道我有一些失誤傳輸值或變量，但我無法檢測它，因為我是新手，所以他們，你能幫幫我嗎？ 謝謝你。

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 ，其中包含 Radio 結構（它是我們直接注入數據的組件）

所以這里是：

 // 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 +以無線電狀態發送

這里還有一個Radio 組件：

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;

該解決方案有效，盡管有一件事 - 它沒有選中該框，我不知道如何修復它。