switchステートメントを使用して複数ステップ/コンポーネントフォームを作成する

Question

私は、4つのコンポーネント間で次と前のスイッチをクリックするとマルチステップフォームを作成しようとしています（この時点ではデータは渡すのではなく、ページ）。私はスイッチのケースを作ったが、今は最初のコンポーネントを返す方法がわからない。 https://github.com/tommymarshall/react-multi-step-form/blob/master/src/javascript/components/Registration.jsx

、ここでは私のコードです：

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import PageOne from './PageOne'; 
import PageTwo from './PageTwo'; 
import PageThree from './PageThree'; 
import PageFour from './PageFour'; 

class Form extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     allInputs: [] 
    } 
    } 
    componentWillMount() { 
    this.setState({allInputs: []}) 
    } 
    getInitialState() { 
    return { 
     step: 1 
    } 
    } 
    saveValues(input) { 
    let allInputs = this.state.allInputs; 
    allInputs.push(input); 
    this.setState({allInputs:allInputs}); 
    } 
    nextStep() { 
    this.setState({ 
     step: this.state.step +1 
    }) 
    } 
    previousStep() { 
    this.setState({ 
     step : this.state.step - 1 
    }) 
    } 
    submitRegistration() {this.nextStep()} 

    showStep() { 
    switch (this.state.step) { 
     case 1: 
     return <PageOne 
         nextStep={this.nextStep} 
         previousStep={this.previousStep} 
         saveValues={this.saveValues} /> 
     case 2: 
     return <PageTwo 
         nextStep={this.nextStep} 
         previousStep={this.previousStep} 
         saveValues={this.saveValues} /> 
     case 3: 
     return <PageThree 
         nextStep={this.nextStep} 
         previousStep={this.previousStep} 
         saveValues={this.saveValues} /> 
     case 4: 
     return <PageFour 
         previousStep={this.previousStep} 
         submitRegistration={this.submitRegistration} /> 
    } 
    } 
    render() { 
    return (
     <div className="Form"> 
     {this.showStep()} 
     </div> 
    ); 
    } 
} 
export default Form; 

私は

をレンダリングする第一の成分を見てする必要があります。この時点で、私が作成-反応するアプリを使用していますので、私は修正を加えて、この例を以下のよ

constructor() { 
    super(); 
    this.state = { 
     allInputs: [], 
     step: 1 
    } 
} 

A：代わりにgetInitialState()の

Answer 1

は、コンストラクタ自体の内部stepプロパティを追加しますlsoは、setState is async以降、次の状態の前の状態に頼っている場合は、機能的setStateを使用します。例えば：あなたのコンストラクタの内部で、あなたの `this.state`オブジェクトに '1'：`ステップを追加し、

nextStep() { 
    this.setState((prevState) => ({ step: prevState.step + 1 })) 
}