如何在Reactjs中创建多步骤表单

import React, { useState } from 'react';

const Step1 = ({ data, setData, nextStep }) => {
  const handleChange = (e) => {
    setData({ ...data, step1Data: e.target.value });
  };

  return (
    <div>
      <h2>Step 1</h2>
      <input type="text" value={data.step1Data} onChange={handleChange} />
      <button onClick={nextStep}>Next</button>
    </div>
  );
};

const Step2 = ({ data, setData, nextStep, prevStep }) => {
  const handleChange = (e) => {
    setData({ ...data, step2Data: e.target.value });
  };

  return (
    <div>
      <h2>Step 2</h2>
      <input type="text" value={data.step2Data} onChange={handleChange} />
      <button onClick={prevStep}>Previous</button>
      <button onClick={nextStep}>Next</button>
    </div>
  );
};

const Step3 = ({ data, prevStep }) => {
  return (
    <div>
      <h2>Step 3</h2>
      <p>Step 1 Data: {data.step1Data}</p>
      <p>Step 2 Data: {data.step2Data}</p>
      <button onClick={prevStep}>Previous</button>
      <button>Submit</button>
    </div>
  );
};

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    step1Data: '',
    step2Data: '',
  });

  const nextStep = () => {
    setStep(step + 1);
  };

  const prevStep = () => {
    setStep(step - 1);
  };

  switch (step) {
    case 1:
      return <Step1 data={data} setData={setData} nextStep={nextStep} />;
    case 2:
      return (
        <Step2 data={data} setData={setData} nextStep={nextStep} prevStep={prevStep} />
      );
    case 3:
      return <Step3 data={data} prevStep={prevStep} />;
    default:
      return null;
  }
};

export default MultiStepForm;