单选框和复选框中的选定选项未传递数据

Question

我正在尝试通过多个页面制作一组问题，所以我需要将第 1 页和第 2 页中选择的答案传递到第 3 页，因为第 3 页就像确认页面，它将显示所有选定的过去 2 页的回答。

界面显示成功，嗯，很简单，但是好像没有传任何数据，哦，题型是radio和checkbox，所以对我来说有点难，因为这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函数是returns另一个函数的函数，第一个函数接受'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;

该解决方案有效，尽管有一件事 - 它没有选中该框，我不知道如何修复它。

单选框和复选框中的选定选项未传递数据

selected options from radio and checkbox are not passing data

javascript

reactjs

semantic-ui

react-native

angular