在一个组件中加载不同的组件-reactjs

Question

I am creating a 4 steps form in reactjs.

Main components is loading sub-components inside it.

When user fill one form and press continue, it should save values of form 1 and load form2 in place of form one. How would i achieve it.

Form 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
}

Main component:

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

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

Answer 1

One solution is to keep form data on the main component and handle changes with event handlers

Given your example:

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>
)

Whenever a change is triggered, you have control over data to make the appropriate changes and later dispatch them to your redux store, state, backend api...

Answer 2

There are two ways you could do this. Either create each component inside your container App component and have a state variable control which step should be shown, or create sub-routes that link to each other.

Example of first approach:

 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>