如何在ReactJs中制作步骤向导表格? [英] How to make step wizard form in ReactJs?

问题描述

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

I am making resume generation application and I have done the things into components.

当前有两个组成部分，

-> 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>

所有组件都在一种形式下，所以我在为整个表单制作步进器组件时面临着困难.

All the components are under a single form, So I am facing difficulty in making the stepper components for the whole form.

我尝试过的库为: 反应-stepper-horizo​​ntal ，但我无法将form包装在上面.

The library that I have tried is: react-stepper-horizontal but I am unable to wrap the form over this.

包括任何其他库也希望获得结果.

Including any other library also appreciated to achieve the result..

要求:

需要实现react-stepper-horizontal，该react-stepper-horizontal的形式应为包装器，而每个组件均应作为步骤.

Need to implement the react-stepper-horizontal that will have the form as wrapper and each components as steps.

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

Could you please kindly help me in making horizontal the step wizard form that has the components as each steps? Thanks in advance..

推荐答案

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

We don't have to split the components to their own forms - we can just use the current form to wrap the Stepper component.

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

Supposed we want to display 3 sections:

1. 基本详细信息
2. 就业细节
3. 评论

我们可以像下面那样构造代码.想法是仅根据currentPage状态显示该部分.

We could structure our code like below. The idea is to just display only the section depending on the currentPage state.

希望代码是不言自明的.

Hopefully the code is 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-horizo​​ntal 文档.

这篇关于如何在ReactJs中制作步骤向导表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！