如何在 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

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

Answer 2

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

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

基本详情
就业详情
评论

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

希望代码是 self-explanatory。

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 文档中阅读有关支持的自定义的更多信息。

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

How to make step wizard form in ReactJs?

javascript

forms

reactjs

next.js

stepper