如何在 Reactjs 中创建多步表单

Question

我们如何在 Reactjs 中创建多步表单的 stepper 以进行多步表单提交。目前我没有显示每个步骤的组件

我想为每个步骤返回 div 组件，因为我无法为此应用逻辑..

现在我可以返回组件，但它会同时返回所有组件，因为我想在中心逐步返回

CodeSandbox Link

这是步进器的代码

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import "./Stepper.scss";

const Stepper = ({ stepColor, steps, direction, currentStep }) => {
  const [stepState, setStepState] = useState([]);

  useEffect(() => {
    let createSteps = steps.map((step, idx) => ({
      description: step.label,
      component: step.component,
      completed: idx < currentStep - 1, // past are completed
      selected: idx <= currentStep - 1, // past & present are colored
      highlighted: idx === currentStep - 1 // only present is highlighted
    }));

    setStepState(createSteps);
  }, [steps, currentStep]);

  return (
    <div className={`stepper-wrapper-${direction}`}>
      {stepState.map(
        ({ selected, completed, highlighted, description, component }, idx) => (
          <div className="step-wrapper" key={idx}>
            <div
              className={`step-number step-number-${
                selected ? "active" : "disabled"
              }`}
              style={{ background: `${selected ? stepColor : "none"}` }}
            >
              {completed ? "✔" : idx + 1}
            </div>
            <div
              className={`step-description ${
                highlighted ? "step-description-active" : ""
              }`}
            >
              {description}
            </div>
            {idx + 1 !== stepState.length && (
              <div
                className={`divider-line divider-line-${stepState.length}`}
              />
            )}
            <div>{component}</div>
          </div>
        )
      )}
    </div>
  );
};

Stepper.propTypes = {
  direction: PropTypes.string.isRequired,
  steps: PropTypes.array.isRequired
};

export default Stepper;

Answer 1

我在您的代码盒中发现一件奇怪的事情是您在 <Stepper/> 组件中提供的道具是错误的

  <div className="stepper-container-horizontal">
    <Stepper
      direction="horizontal"
      currentStepNumber={state.currentStep - 1}
      steps={stepsArray}
      stepColor="purple"
    />
  </div>

您正在传递给 currentStepNumber，但 Step 组件正在接受 currentStep

在这一行

const Stepper = ({ stepColor, steps, direction, currentStep = 1 }) => {...

我确实将 currentStepNumber 更改为 currentStep 并且现在正在工作。