如何在 ReactJs 中制作步骤向导表单？

Posted 2023-02-23

【中文标题】如何在 ReactJs 中制作步骤向导表单？

【英文标题】：How to make step wizard form in ReactJs?

【发布时间】：2020-12-22 07:33:59

【问题描述】：

我正在制作简历生成应用程序，并且我已经将这些东西做成了组件。

目前有两个组件，例如，

-> BasicDetails
-> EmploymentDetails

完整的工作示例：

https://codesandbox.io/s/next-dynamic-testing-issue-forked-h1nt8

index.js

  <form onSubmit=handleSubmit>
    Basic Details:
    <br />
    <hr />
    <BasicDetails />
    <br />
    <br />
    Employment Details:
    <br />
    <hr />
    <EmploymentDetails />
    <div className="submit-button">
      <button
        className="btn btn-primary mr-2"
        type="submit"
        onSubmit=handleSubmit
      >
        Save
      </button>
    </div>
    <pre>JSON.stringify(value, null, 2)</pre>
  </form>

所有组件都在一个表单下，所以我在为整个表单制作步进器组件时遇到了困难。

我尝试过的库是：react-stepper-horizontal，但我无法将form 包裹在上面。

包括任何其他库也很感激达到这个结果..

要求：

需要实现react-stepper-horizontal，它将表单作为包装器，每个组件作为步骤。

能否请您帮我制作水平的步骤向导表单，每个步骤都有组件？提前谢谢..

【问题讨论】：

你不想为这两个组件分开表单吗？

@bertdida，感谢您的评论。要求是我需要将组件拆分为水平步骤。由于您已经了解表单结构，我相信您可以以更好的方式帮助我。 . 考虑像这个库npmjs.com/package/react-stepper-horizontal 在step 1 我需要有basic details 和Step 2 我需要有employments details 和进一步的步骤继续.. 但所有这些步骤都被认为是单一的形式。 . 如果需要拆分表格并最后一次全部加入，点击保存按钮对我来说也可以..

@bertdida，或者你可以考虑像这个例子codesandbox.io/s/blybc（它只有两个步骤）但在我的情况下，这些步骤将继续......在每个步骤中单击next/previous按钮那么该特定步骤需要在顶部水平指示处突出显示。如果您需要进一步的输入，那么我也可以提供相同的输入..

@bertdida，我在此解决方案中遇到问题。在您在以下解决方案中提供的代码框中，如果我们在 step 1 下的文本编辑器中输入配置文件摘要数据，并且如果我们移至step 2，如果我们再次来到step 1，那么已经输入的数据会在文本编辑器中丢失..

【参考方案1】：

我们不必将组件拆分为自己的表单 - 我们可以使用当前表单来包装 Stepper 组件。

假设我们要显示 3 个部分：

基本信息 就业详情 审核

我们可以像下面这样构造我们的代码。这个想法是只显示取决于currentPage 状态的部分。

希望代码是不言自明的。

import Stepper from 'react-stepper-horizontal';

const Form = () => 
  const [value] = React.useContext(FormContext);

  const [currentPage, setCurrentPage] = useState(1);
  const sections = [
     title: 'Basic Details' ,
     title: 'Employment Details' ,
     title: 'Review' ,
  ];

  const handleSubmit = (e) => 
    e.preventDefault();
    console.log(value);
  ;

  const next = () => setCurrentPage((prev) => prev + 1);
  const prev = () => setCurrentPage((prev) => prev - 1);

  return (
    <>
      <h1>Dynamic Form Fields in React</h1>
      <form onSubmit=handleSubmit>
        <Stepper
          steps=sections
          activeStep=currentPage
          activeColor="red"
          defaultBarColor="red"
          completeColor="green"
          completeBarColor="green"
        />

        currentPage === 1 && (
          <>
            <BasicDetails />
            <button onClick=next>Next</button>
          </>
        )

        currentPage === 2 && (
          <>
            <EmploymentDetails />
            <div style= display: 'flex', justifyContent: 'space-between' >
              <button onClick=prev>Back</button>
              <button onClick=next>Next</button>
            </div>
          </>
        )

        currentPage === 3 && (
          <>
            <pre>JSON.stringify(value, null, 2)</pre>
            <div style= display: 'flex', justifyContent: 'space-between' >
              <button onClick=prev>Back</button>
              <button onClick=handleSubmit>Submit</button>
            </div>
          </>
        )
      </form>
    </>
  );
;

在react-stepper-horizontal 文档中了解更多支持的自定义。

【讨论】：

再次感谢您的快速帮助.. 是否可以通过单击顶部水平栏中的步骤编号导航到步骤？例如..，如果我们点击Step 2 圆圈然后导航到Employment Details ??

是的，当然！我们可以将onClick 包含到我们的section 对象中。我更新了代码框。

兄弟在吗？我在这个解决方案中遇到了问题.. 在您上面提供的代码和框中，如果我们在文本编辑器中输入配置文件摘要数据，在 step 1 下，如果我们移动到 step 2，如果我们再次来到 step 1，那么已经输入的数据会在文本编辑器中丢失..

请兄弟，我正在这个***.com/questions/63725657/component-re-render-issue 中等待您的解决方案。我自己尝试了很多步骤，问题中发布的答案也不起作用..请帮助我..

好的兄弟..但是不要忘记兄弟，从昨天开始等待您的解决方案..在这种情况下我面临着艰难时期..希望您了解我的情况..再次感谢兄弟..

【参考方案2】：

我不确定您是否想自己从头开始构建，但如果不想，请尝试React Albus。它还支持步进和路由。

【讨论】：

我不想从头开始做任何事情，只需要将表单内的组件转换为步进组件。我没有路由和所有的东西。将组件转换为简单水平台阶就是这样..

那就试试 react albus。它非常适合您的要求。另外，我建议将表单分解为单独的表单。

你能帮我把表格拆分成步进式吗？非常感谢您的帮助..

我发布的链接确实包含从简单到复杂的示例。看看这个：codesandbox.io/s/github/americanexpress/react-albus/tree/master/…。这是一个简单的实现。它没有表单部分，但应该能让你继续前进。

是的，我浏览了该链接并感谢分享。但在我的情况下，表格是我需要帮助的主要重要部分。我还需要强调我在此库中找不到选项的顶部水平步骤中的活动步骤..无论如何感谢您的输入..