reactjs - React Stepper 更改状态 onClick

Question

我是 Ract 的新手，我在 Next.js 中构建了一个多步骤表单，我也使用了 Context。所以我的项目结构非常狂野，当移动到步进器的下一步时，我不知道如何/在哪里更改 steps.status。到目前为止，我有我的上下文，管理一半的状态，基本上是 formData，还有我的步进器的“原始”状态：

import { useState, createContext, useContext } from "react";

export const FormContext = createContext();

export default function FormProvider({ children }) {
  const [data, setData] = useState({});
  const [steps, setSteps] = useState([
    { name: 'Vertrag', status: 'current' },
    { name: 'Dateneingabe', status: 'upcoming' },
    { name: 'Bestätigung', status: 'upcoming' },
  ]);

  
  const setFormValues = (values) => {
    setData((prevValues) => ({
      ...prevValues,
      ...values,
    }));
  };

  return (
    <FormContext.Provider value={{ steps, data, setFormValues }}>
      {children}
    </FormContext.Provider>
  );
}

export const useFormData = () => useContext(FormContext);

因此，在 Stepper.js 中，我导入了我的 formData：

import { CheckIcon } from '@heroicons/react/solid'
import { useContext } from 'react'
import { FormContext } from "../context";
// status: 'complete', 'current', 'upcoming'


function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

export default function Stepper() {
const formData = useContext(FormContext);
const steps = formData.steps

 
  return (
    <nav aria-label="Progress">
      <div className="flex items-center flex-col">
        <ol className="flex items-center sm:flex-col md:flex-row mx-auto mt-32 mb-8">
          {steps.map((step, stepIdx) => (
            <li key={step.name} className={classNames(stepIdx !== steps.length - 1 ? 'pr-16 sm:pr-32' : '', 'relative')}>
              {step.status === 'complete' ? (
                <>
                  <div className="absolute inset-0 flex items-center" aria-hidden="true">
                    <div className="h-0.5 w-full bg-yellow-500" />
                  </div>
                  <a
                    href="#"
                    className="relative w-8 h-8 flex items-center justify-center bg-yellow-500 rounded-full hover:bg-yellow-500"
                  >
                    <span className="h-9 flex flex-col items-center">
                      <span className="relative top-2 z-10 w-8 h-8 flex items-center justify-center rounded-full group-hover:bg-indigo-800">
                        <CheckIcon className="w-5 h-5 text-white" aria-hidden="true" />
                      </span>
                      <span className="text-xs font-semibold tracking-wide text-gray-600 mt-8">{step.name}</span>
                    </span>
                  </a>
                </>
              ) : step.status === 'current' ? (
                <>
                  <div className="absolute inset-0 flex items-center" aria-hidden="true">
                    <div className="h-0.5 w-full bg-gray-200" />
                  </div>
                  <a
                    href="#"
                    className="relative w-8 h-8 flex items-center justify-center bg-white border-2 border-yellow-500 rounded-full"
                    aria-current="step"
                  >
                    <span className="h-9 flex flex-col items-center">
                      <span className="z-10 w-8 h-8 flex items-center justify-center rounded-full group-hover:bg-indigo-800">
                        <span className="relative h-2.5 w-2.5 bg-yellow-500 rounded-full relative" style={{top: '0.8rem'}} />
                      </span>
                      <span className="text-xs font-semibold tracking-wide text-gray-600" style={{marginTop: '2.72rem'}}>{step.name}</span>
                    </span>
                  </a>
                </>
              ) : (
                <>
                  <div className="absolute inset-0 flex items-center" aria-hidden="true">
                    <div className="h-0.5 w-full bg-gray-200" />
                  </div>
                  <a
                    href="#"
                    className="group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400"
                  >
                    <span className="h-9 flex flex-col items-center">
                      <span className="z-10 w-8 h-8 flex items-center justify-center rounded-full">
                        
                        <span className="relative h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300" style={{top: '0.8rem'}} />
                      </span>
                      <span className="text-xs font-semibold tracking-wide text-gray-600" style={{marginTop: '2.72rem'}}>{step.name}</span>
                    </span>
                  </a>
                </>
                
              )}
            </li>
          ))}
        </ol>
        
      </div>
    </nav>
  )

此外，我有 index.js 页面，所有组件都聚集在一起

import { useState } from "react";
import Head from "next/head";
import Stepper from '../components/Stepper'
import styles from "../styles/styles.module.scss";
import FormCard from "../components/FormCard";
import Navbar from "../components/Navbar";
import { CheckIcon } from '@heroicons/react/solid'

import {
  PersonalInfo,
  ConfirmPurchase,
  ContractInfo,
} from "../components/Forms";

import FormCompleted from "../components/FormCompleted";

function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}

const App = () => {
  const [formStep, setFormStep] = useState(0);
  const nextFormStep = () => setFormStep((currentStep) => currentStep + 1);
  const prevFormStep = () => setFormStep((currentStep) => currentStep - 1);

  const [activeStep, setActiveStep] = useState(0);
  
  const handleNextStep = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handlePrevoiusStep = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };



  return (
    
    <div>
      <Head>
        <title>Next.js Multi Step Form</title>
      </Head>
      < Navbar />
      < Stepper activeStep={activeStep} />
        <div className={styles.container}>
          <FormCard currentStep={formStep} prevFormStep={prevFormStep}>
            {formStep >= 0 && (
              <ContractInfo formStep={formStep} nextFormStep={nextFormStep} />
            )}
            {formStep >= 1 && (
              <PersonalInfo formStep={formStep} nextFormStep={nextFormStep} />
            )}
            {formStep >= 2 && (
              <ConfirmPurchase formStep={formStep} nextFormStep={nextFormStep} />
            )}
            {formStep > 2 && <FormCompleted />}
          </FormCard>
        </div>
        <div className="mt-1 mb-5 sm:mt-8 sm:flex sm:justify-center lg:justify-center">
          <div className="rounded-md shadow">
            <a role="button" tabIndex={0}
            onClick={ () => { prevFormStep(); handlePrevoiusStep() }}
            className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
            >
              Back
            </a>
          </div>
          <div className="mt-3 sm:mt-0 sm:ml-3">
            <a
              onClick={ () => { nextFormStep(); handleNextStep() }}
              className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
            >
              Next
            </a>
          </div>
      </div>
    </div>
  );
};

export default App;

如您所见，Stepper 在三个不同的文件中进行管理。但是我至少能够在单击按钮时更改 activeStep 索引，这对我来说已经是一个巨大的挑战。所以现在我也需要改变设计。这样 activeStep 得到step.status === 'current'. 所有 stepps index < activeStep index 应该得到step.status === 'complete'并且逻辑上 all stepps index > activeStep index - step.status === 'upcoming'。现在我尝试在 index.js 中处理这个问题，但当然可以返回step is undefined，即使它是通过上下文在 Stepper.js 中定义的。

标签： reactjsnext.js