如何在React中實現多步驟表單或向導界面

在React中實現多步驟表單或向導界面可以通過以下步驟：

1. 創建一個父組件來管理整個表單或向導界面的狀態。這個父組件將包含一個狀態來跟蹤當前步驟，以及一個函數來處理步驟之間的切換。

2. 創建多個子組件來表示每個步驟。每個子組件將包含該步驟的表單字段和提交按鈕。

3. 在父組件中根據當前步驟的狀態來渲染對應的子組件，并傳遞必要的props給子組件。

4. 在子組件中，處理用戶輸入并更新表單字段的狀態。當用戶點擊提交按鈕時，調用父組件的函數來切換到下一個步驟。

5. 重復步驟3和步驟4，直到所有步驟都完成。

以下是一個簡單的示例代碼：

import React, { useState } from 'react';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({});

  const handleNextStep = (data) => {
    setFormData({ ...formData, ...data });
    setStep(step + 1);
  };

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

  const handleSubmit = () => {
    // 提交表單的邏輯
  };

  const renderStep = () => {
    switch (step) {
      case 1:
        return <Step1 nextStep={handleNextStep} />;
      case 2:
        return <Step2 nextStep={handleNextStep} prevStep={handlePrevStep} />;
      case 3:
        return <Step3 formData={formData} handleSubmit={handleSubmit} />;
      default:
        return null;
    }
  };

  return (
    <div>
      {renderStep()}
    </div>
  );
};

const Step1 = ({ nextStep }) => {
  const [name, setName] = useState('');

  const handleNext = () => {
    nextStep({ name });
  };

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleNext}>Next</button>
    </div>
  );
};

const Step2 = ({ nextStep, prevStep }) => {
  const [email, setEmail] = useState('');

  const handleNext = () => {
    nextStep({ email });
  };

  const handlePrev = () => {
    prevStep();
  };

  return (
    <div>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button onClick={handlePrev}>Prev</button>
      <button onClick={handleNext}>Next</button>
    </div>
  );
};

const Step3 = ({ formData, handleSubmit }) => {
  const { name, email } = formData;

  return (
    <div>
      <p>Name: {name}</p>
      <p>Email: {email}</p>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default MultiStepForm;

在上面的示例中，MultiStepForm組件是父組件，負責管理整個多步驟表單的狀態和渲染。Step1，Step2和Step3是子組件，分別對應不同的步驟。根據當前步驟的狀態，父組件會渲染對應的子組件，并傳遞必要的props給子組件。當用戶輸入表單數據并點擊按鈕時，父組件會更新表單數據和當前步驟，并切換到下一個步驟。