我用四个页面实现了一个向导表单。当我从第1页更改为第2页时,所有表格值均被删除。奇怪的是,其他所有页面都不会发生这种情况。 Redux开发人员工具显示状态变化
坦白说,我什至现在都不知道红色的划掉的文字是什么(被删除,覆盖了吗?)。
代码很简单:
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%...