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

IT技术 javascript reactjs forms next.js stepper
2021-05-14 11:49:40

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

目前有两个组件，例如，

-> BasicDetails
-> EmploymentDetails

完整的工作示例：

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

索引.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-horizo​​ntal但我无法解决form这个问题。

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

要求：

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

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

2个回答

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

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

其它你可能感兴趣的问题
上一篇如何使用 Azure Easy Auth 获取访问令牌？ 下一篇react带卡无法根据屏幕大小对齐项目