javascript - 如何在 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将表单作为包装器并将每个组件作为步骤。

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

标签： javascriptreactjsformsnext.jsstepper

解决方案

我们不必将组件拆分为它们自己的表单——我们可以只使用当前表单来包装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-horizo ntal 文档的支持自定义。

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

问题描述

解决方案

推荐阅读