时间戳

首页 > 解决方案 > 如何在 React 中设置多步表单？

javascript - 如何在 React 中设置多步表单？

问题描述

我在 React 中有多步骤表单，在每个步骤中您都必须输入信息。

第 1 步：...一些信息并选择语言（您可以选择多种语言） 第 2 步：...一些信息 第 3 步：...一些上传信息 第 4 步：用户回答特定问题，这些问题必须显示用户选择的所有语言。

例如：如果用户选择了英语和法语，那么用户将用英语回答问题，然后单击保存/下一步，然后用法语回答问题。

第五步：确认

默认情况下，页面在第 1 步，用户可以通过单击保存/下一步按钮进入下一步，然后步骤状态递增并显示第 2 步，我无法弄清楚第 4 步的流程，它会像多步骤表格中的多步骤表格听起来不正确。

因此，如果有人知道如何以更好的方式执行第 4 步，请帮助我。

提前致谢。

标签： javascriptreactjs

解决方案

最初你可以有多个步骤如下

switch(step) {
    case 1:
        return(
            <FirstStep
                handleCaseNumber={this.handleCaseNumber}
                handleChange={this.handleChange}
                values={values}
            />
        )
    case 2:
        return(
            <SecondStep
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleClientVerification={this.handleClientVerification}
                handleChange={this.handleChange}
                values={values}
            />                
        )                
    case 3:
        return(              
            <ThirdStep
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleAccessToken={this.handleAccessToken}
                handleChange={this.handleChange}
                values={values}
            />
        )
    case 4:
        return(
            <FourthStep
                nextStep={this.nextStep}
                handleChange={this.handleChange}
                values={values}
            />              
        )                                
}

之后在第四步组件中，您可以像孩子一样拥有这样的步骤

switch(step) {
    case 1:
        return(
            <ChildStepOne
                handleCaseNumber={this.handleCaseNumber}
                handleChange={this.handleChange}
                values={values}
            />
        )
    case 2:
        return(
            <ChildStepTwo
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleClientVerification={this.handleClientVerification}
                handleChange={this.handleChange}
                values={values}
            />                
        )                               
}

您可以根据需要遵循此结构。

推荐阅读