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

Question

我正在用 reactjs 创建一个 4 步表单。

主要组件正在加载其中的子组件。

当用户填写一个表单并按继续时，它应该保存表单 1 的值并加载 form2 代替表单 1。我将如何实现它。

表格 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

有两种方法可以做到这一点。要么在容器 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>