我正在尝试将状态发送给父母组件。 但是不明白

Question

如何将FMoStep1.js的统计信息发送到formSaves数组中的向导？ 我尝试使用handleFormSubmit方法将统计信息传递给向导，但是它不起作用。

然后，步骤更改也存在问题，它不会从FMoStep1更改为FMoStep2 。

Wizard.js

import React, { Component } from 'react';

import FMoStep1 from './FMoStep1';
import FMoStep2 from './FMoStep2';
import FMoStep3 from './FMoStep3';

import { states } from './States'
import { StateMachine } from './StateMachine.js';

class Wizard extends Component {
    constructor(props) {
        super(props);

        this.state = {
            currentState: states.FMoStep1,
            formSaves: []
        }

        this.saveForm = this.saveForm.bind(this);
        this.nextStep = this.nextStep.bind(this);
        this.backStep = this.backStep.bind(this);
        this.stateMachine = new StateMachine();
    }

    nextStep(desiredState) {
        let currentState = this.state.currentState;
        let nextState = this.stateMachine.transitionTo(currentState, desiredState);
        this.setState({
            currentState: nextState
        });
    }

    backStep(desiredState) {
        let currentState = this.state.currentState;
        this.setState({
            currentState: this.stateMachine.transitionFrom(currentState, desiredState)
        });
    }

    saveForm(formSave) {
        let formSaves = this.state.formSaves.concat();
        formSaves.push(formSave);
        this.setState({
            formSaves: formSaves
        });
    }

    //Switch Case Methode um den CurrentStep zu bestimmen
    currentStep() {
        switch (this.state.currentState) {
            case states.FMoStep1:
            return (
                <FMoStep1
                    saveForm={this.saveForm}
                    back={this.backStep}
                    next={this.nextStep} />
            );
            case states.FMoStep2:
            return (
                <FMoStep2
                    saveForm={this.saveForm}
                    back={this.backStep}
                    next={this.nextStep} />
                );
            case states.FMoStep3:
            return (
                <FMoStep3
                    saveForm={this.saveForm}
                    back={this.backStep}
                    next={this.nextStep} />
                );
            default:
            break;
        }
    }

    render() {
        return (
            <div>{ this.currentStep() }</div>
        );
    }
}
export default Wizard;

FMoStep1

import React, { Component } from 'react';

import SingleInput from './SingleInput';
import TextArea from './TextArea';

class FMoStep1 extends Component {
    constructor(props) {
        super(props);

        this.state = {
            modultitel: '',
            startdate: '',
            enddate: '',
            modulkuerzel: '',
            modulDescription: ''
        };

        this.handleModultitel = this.handleModultitel.bind(this);
        this.handleStartdate = this.handleStartdate.bind(this);
        this.handleEnddate = this.handleEnddate.bind(this);
        this.handleModulkuerzel = this.handleModulkuerzel.bind(this);
        this.handlemodulDescriptionChange = this.handlemodulDescriptionChange.bind(this);
        this.handleClearForm = this.handleClearForm.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleModultitel(e) {
        this.setState(
            { modultitel: e.target.value },
            () => console.log('modultitel:', this.state.modultitel)
        );
    }

    handleStartdate(e) {
        this.setState(
            { startdate: e.target.value },
            () => console.log('startdate:', this.state.startdate)
        );
    }

    handleEnddate(e) {
        this.setState(
            { enddate: e.target.value },
            () => console.log('enddate:', this.state.enddate)
        );
    }

    handleModulkuerzel(e) {
        this.setState(
            { modulkuerzel: e.target.value },
            () => console.log('modulkuerzel', this.state.modulkuerzel)
        );
    }

    handlemodulDescriptionChange(e) {
        this.setState(
            { modulDescription: e.target.value },
            () => console.log('modulDescription', this.state.modulDescription)
        );
    }

    handleClearForm(e) {
        e.preventDefault();
        this.setState({
            modultitel: '',
            startdate: '',
            enddate: '',
            modulkuerzel: '',
            modulDescription: ''
        });
    }


    handleFormSubmit(e) {
        e.preventDefault();

        const formPayload = {
            modultitel: this.state.modultitel,
            startdate: this.state.startdate,
            enddate: this.state.enddate,
            modulkuerzel: this.state.modulkuerzel,
            modulDescription: this.state.modulDescription
        };
        console.log('send befor', formPayload)
        this.props.next(this.props.nextState);

        console.log('Send this in a Post request:', this.state);
        //States übertragen in die Session
        this.props.saveForm(formPayload);

        this.handleClearForm(e);
    }

    render() {
        return (
            <form>
                <h5>Modul anlegen (Schritt 1 von x)</h5>
                <SingleInput
                    inputType={'text'}
                    title={'Modultitel: '}
                    name={'name'}
                    controlFunc={this.handleModultitel}
                    content={this.state.modultitel}
                    placeholder={'Modultitel'} />
                <SingleInput
                    inputType={'text'}
                    title={'Gültig ab: '}
                    name={'Startdate'}
                    controlFunc={this.handleStartdate}
                    content={this.state.startdate}
                    placeholder={'Startdatum'} />
                <SingleInput
                    inputType={'text'}
                    title={'Gültig bis: '}
                    name={'Enddate'}
                    controlFunc={this.handleEnddate}
                    content={this.state.enddate}
                    placeholder={'Enddatum'} />
                <SingleInput
                    inputType={'text'}
                    title={'Modulkürzel'}
                    name={'Modulkürzel'}
                    controlFunc={this.handleModulkuerzel}
                    content={this.state.modulkuerzel}
                    placeholder={'Modulkützel'} />
                <TextArea
                    title={'Kurzbeschreibung'}
                    rows={5}
                    name={'Kurzbeschreibung'}
                    resize={false}
                    content={this.state.modulDescription}
                    controlFunc={this.handlemodulDescriptionChange}
                    placeholder={'Kurzbeschreibung zu Modulen'} />
                <button
                    onClick={this.handleFormSubmit}>Weiter</button>
                <button
                    onClick={this.handleClearForm}>Clear form</button>
            </form>
        );
    }
}

export default FMoStep1;

谢谢！

Answer 1

您将依靠nextState prop导航到您不提供的FMoStep1组件中的FMoStep1 。 通过然后它应该工作

  switch (this.state.currentState) {
        case states.FMoStep1:
            return <FMoStep1
                saveForm={this.saveForm}
                nextState={states.FMoStep2}
                back={this.backStep}
                next={this.nextStep}
                />;
        case states.FMoStep2:
            return (<FMoStep2
                saveForm={this.saveForm}
                nextState={states.FMoStep3}
                back={this.backStep}
                next={this.nextStep}
            />);
        case states.FMoStep3:
            return (<FMoStep3
                saveForm={this.saveForm}
                back={this.backStep}
                next={this.nextStep}
            />);

        default:
            break;
    }

PS但是我建议您重组代码，并可能使用路由而不是条件渲染组件