Redux Form Wizard表单值会被删除吗?

时间:2019-07-11 08:27:43

标签: reactjs redux-form

我用四个页面实现了一个向导表单。当我从第1页更改为第2页时,所有表格值均被删除。奇怪的是,其他所有页面都不会发生这种情况。 Redux开发人员工具显示状态变化

enter image description here

坦白说,我什至现在都不知道红色的划掉的文字是什么(被删除,覆盖了吗?)。

代码很简单:

Index.js

class ConfiguratorForm extends Component {
    constructor(props) {
        super(props);
        this.nextSection = this.nextSection.bind(this);
        this.previousSection = this.previousSection.bind(this)
        this.state = {
            section: 1
        }
    }

    nextSection() {
        this.setState({section: this.state.section + 1})
    }

    previousSection() {
        this.setState({section: this.state.section - 1})
    }

    onSubmit(values) {
        console.log(values);
        this.props.sendAnnonymousOrderRequest(
            values, 
            () => this.props.history.push('/services/order-request-success/'))
    }

    render() {
        const { section } = this.state;
        return(
            <ConfiguratorFormSection>
                <div>
                    {section === 1 && <WizardFormFirstSection onSubmit={this.nextSection}/>}
                    {section === 2 && <WizardFormSecondSection goBack={this.previousSection} onSubmit={this.nextSection}/>}
                    {section === 3 && <WizardFormThirdSection goBack={this.previousSection} onSubmit={this.nextSection}/>}
                    {section === 4 && <WizardFormFourthSection goBack={this.previousSection} onSubmit={this.onSubmit.bind(this)}/>}
                </div>
            </ConfiguratorFormSection>
        )
    }
}

const mapDispatchToProps = dispatch => {
    return bindActionCreators({
        sendAnnonymousOrderRequest,
    }, dispatch)
}

export default compose(
    connect(null, mapDispatchToProps),
    withRouter,
) (ConfiguratorForm)

FirstSection.js

class WizardFormFirstSection extends Component {

    componentDidMount() {
        this.props.initialize({
            employeeCount: 8,
            diet: "mixed",
        })
    }

    render() {
        const { handleSubmit} = this.props;
        return(
            <SectionFormBoundingForm shrink onSubmit={handleSubmit}>
                <H2 three>Konfiguriere deine Bestellanfrage.</H2>
                <section className="u-margin-y--medium">
                    <section className="">
                        <H3 three uppercase className="">Grundsätzliches</H3>
                        <Paragraph three formParagraph justified>Wähle eine Kategorie von Lebensmittel aus, die du erhalten möchtest.</Paragraph>
                        <InputOffset>
                            <ToggleLabel>
                                <Field name="diet" component="input" type="radio" value="vegetarian"/> 
                                <ToggleSpan />
                                Vegetarisch
                            </ToggleLabel>
                            <ToggleLabel>
                                <Field name="diet" component="input" type="radio" value="mixed"/> 
                                <ToggleSpan />
                                Gemischt (+ Fleisch)
                            </ToggleLabel>
                            <ToggleLabel>
                                <Field name="diet" component="input" type="radio" value="vegan"/> 
                                <ToggleSpan />
                                Vegan
                            </ToggleLabel>
                        </InputOffset>
                    </section>
                    <section>
                        <H3 three uppercase className="u-padding-t--medium">Anzahl der Mitarbeiter</H3>
                        <Paragraph formParagraph three justified>Die Anzahl der Mitarbeiter, die beliefert werden sollen, hilft uns, die Liefermenge zu berechnen.</Paragraph>
                        <InputOffset>
                            <Field
                                name="employeeCount"
                                component={renderRangeInput}
                                min="8"
                                max="50"
                                left
                                number
                                heading="Mitarbeiter"
                                maxText={<span>Du möchtest eine Bestellanfrage für 
                                mehr als 50 Mitarbeiter platzieren? Kontaktiere uns bitte persönlich.</span>}
                            />
                        </InputOffset>
                    </section>
                </section>
                <Button submit type="submit" className="u-margin-y--medium">Weiter</Button>
            </SectionFormBoundingForm>
        )
    }



}

export default reduxForm({
    form: 'configuration-wizard',              // <------ same form name
    destroyOnUnmount: false,     // <------ preserve form data
  })(WizardFormFirstSection)

你们能帮忙吗? 格式“配置向导”的名称在所有页面上都相同1000000%...

0 个答案:

没有答案