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

Question

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

目前有两个组件，例如，

-> 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，它将表单作为包装器，每个组件作为步骤。

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

Answer 1

我们不必将组件拆分为自己的表单 - 我们可以使用当前表单来包装 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 文档中了解更多支持的自定义。

Answer 2

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