使用React Hooks跨材料传递数据-UI Stepper

import React, { createContext, useState } from 'react';

// 创建数据上下文
const StepperContext = createContext();

const StepperProvider = ({ children }) => {
  const [activeStep, setActiveStep] = useState(0);
  const [data, setData] = useState({});

  const handleNext = () => {
    setActiveStep(prevStep => prevStep + 1);
  };

  const handleBack = () => {
    setActiveStep(prevStep => prevStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
    setData({});
  };

  const contextValue = {
    activeStep,
    data,
    handleNext,
    handleBack,
    handleReset,
    setData
  };

  return (
    <StepperContext.Provider value={contextValue}>
      {children}
    </StepperContext.Provider>
  );
};

export { StepperContext, StepperProvider };

import React, { useContext } from 'react';
import { StepperContext } from './StepperContext';

const UIStepper = () => {
  const { activeStep, handleNext, handleBack, handleReset, setData } = useContext(StepperContext);

  const handleInputChange = (e) => {
    setData(prevData => ({
      ...prevData,
      [e.target.name]: e.target.value
    }));
  };

  return (
    <div>
      <h2>Step {activeStep + 1}</h2>
      {activeStep === 0 && (
        <div>
          <input type="text" name="name" onChange={handleInputChange} />
          <button onClick={handleNext}>Next</button>
        </div>
      )}
      {activeStep === 1 && (
        <div>
          <input type="email" name="email" onChange={handleInputChange} />
          <button onClick={handleBack}>Back</button>
          <button onClick={handleNext}>Next</button>
        </div>
      )}
      {activeStep === 2 && (
        <div>
          <input type="password" name="password" onChange={handleInputChange} />
          <button onClick={handleBack}>Back</button>
          <button onClick={handleNext}>Next</button>
        </div>
      )}
      {activeStep === 3 && (
        <div>
          <p>Name: {data.name}</p>
          <p>Email: {data.email}</p>
          <p>Password: {data.password}</p>
          <button onClick={handleReset}>Reset</button>
        </div>
      )}
    </div>
  );
};

export default UIStepper;