異なるコンポーネントを1つのコンポーネントにロードする - reactjs

Question

私はreactjsで4ステップのフォームを作成しています。

メインコンポーネントは、内部にサブコンポーネントをロードしています。

ユーザーが1つのフォームに入力して続行を押すと、フォーム1の値を保存し、フォーム1の代わりにフォーム2をロードする必要があります。どのように私はそれを達成するだろう。

フォーム1

handleClick() { //When user submits form 1 
    //Save All Values of form 1 and load form 2 


    //window.openAppRoute("/payments"); //Not Working 
    //hashHistory.push('/dashboard'); //Not Working 
    //history.push('/dashboard'); //Not Working 
} 

メインコンポーネント：

return (
    <div className="custom-container"> 

    <div className="page-content"> 
     <Form1 /> 
     //<Form2 /> Should load next 
     //<Form3 /> Should load next 
    </div> 
    </div> 
) 

Answer 1

あなたがこれを行うことができ、2つの方法があります。コンテナのAppコンポーネント内に各コンポーネントを作成し、どのステップを表示するかをステート変数で制御するか、お互いにリンクするサブルートを作成します。最初のアプローチの

例：

class MyApp extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     step: 0 
 
    }; 
 
    } 
 
    
 
    nextStep =() => { 
 
    this.setState((prevState) => ({step: prevState.step + 1})); 
 
    } 
 
    
 
    render() { 
 
    let {step} = this.state; 
 
    let form = [<Form1 />, <Form2 />, <Form3 />]; 
 
    return(
 
     <div> 
 
     {form[step]} 
 
     {form.length-1 > step && <button onClick={this.nextStep}>Next</button>} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
const Form1 =() => <div>Form 1</div>; 
 
const Form2 =() => <div>Form 2</div>; 
 
const Form3 =() => <div>Form 3</div>; 
 
    
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

一つの解決策は、主成分でフォームデータを保持し、あなたの例を考えると、イベントハンドラ

変化を処理することです。

const { data, step } = this.props 

return (
    <div> 
    {step === 0 && <Form1 data={data} onChange={/**/} />} 
    {step === 1 && <Form2 data={data} onChange={/**/} />} 
    {step === 2 && <Form3 data={data} onChange={/**/} />} 
    </div> 
) 

変更がトリガーされるたびに、あなたは適切な変更を行うことがdataを管理しているし、後で あなたのReduxの店、状態、バックエンドAPIにそれらを派遣...