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

问题描述

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

目前有两个组件，例如，

->基本详情->就业详情

完整的工作示例:

<块引用>

在 react-stepper-horizo​​ntal 文档.

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

Currently there are two components such as,

-> BasicDetails
-> EmploymentDetails

Complete working example:

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.

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

Requirement:

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

解决方案

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

Supposed we want to display 3 sections:

1. Basic Details
2. Employment Details
3. Review

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>
    </>
  );
};

Read more for supported customizations on the react-stepper-horizontal docs.

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