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

问题描述

我正在制作简历生成应用程序，并且已将这些内容分解为组件。

目前有两个组成部分，

-> 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，该表单的形式为包装器，每个组件为步骤。

能否请您帮助我制作水平步骤向导表单，该表单包含每个步骤的组成部分？预先感谢。.

解决方法

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

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

1. 基本详细信息
2. 就业细节
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文档上了解更多有关受支持的自定义内容。

,

我不确定您是否想自己重新构建，否则，请尝试React Albus。它也支持步进和路由。