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

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

主要组件在其内部加载子组件

当用户填写一张表单并按continue时，它应保存表单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>
)

返回(
//下一个应该加载吗
//下一个应该加载吗
)

一种解决方案是将表单数据保留在主组件上，并使用事件处理程序处理更改

举个例子：

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

const{data，step}=this.props
返回(
{步骤===0&&}
{步骤===1&&}
{步骤===2&&}
)

无论何时触发更改，您都可以控制

数据

，以进行适当的更改，并在以后进行更改

---

将它们分派到redux存储、状态、后端api…

一个解决方案是将表单数据保存在主组件上，并使用事件处理程序处理更改

举个例子：

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

const{data，step}=this.props
返回(
{步骤===0&&}
{步骤===1&&}
{步骤===2&&}
)

无论何时触发更改，您都可以控制

数据

，以进行适当的更改，并在以后进行更改

---

将它们发送到您的redux存储、状态、后端api…

有两种方法可以做到这一点。在容器应用程序组件内创建每个组件，并使用状态变量控制应显示的步骤，或者创建相互链接的子路由

第一种方法的示例：

MyApp类扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 步骤：0 }; } 下一步=（）=>{ this.setState（（prevState）=>（{step:prevState.step+1}））； } render（）{ 设{step}=this.state； 设form=[，]； 返回( {form[step]} {form.length-1>步骤和下一步&&Next} ); } } const Form1=（）=>Form1； constform2=（）=>Form2； const Form3=（）=>Form3； ReactDOM.render（，document.getElementById（“app”）

---

有两种方法可以做到这一点。在容器应用程序组件内创建每个组件，并使用状态变量控制应显示的步骤，或者创建相互链接的子路由

第一种方法的示例：

MyApp类扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 步骤：0 }; } 下一步=（）=>{ this.setState（（prevState）=>（{step:prevState.step+1}））； } render（）{ 设{step}=this.state； 设form=[，]； 返回( {form[step]} {form.length-1>步骤和下一步&&Next} ); } } const Form1=（）=>Form1； constform2=（）=>Form2； const Form3=（）=>Form3； ReactDOM.render（，document.getElementById（“app”）

但这是一次加载所有三个表单，对吗？我想一张一张地加载表单，但这是一次加载所有三个表单，对吗？我想一张一张地填表格。