如何在React中处理3层深度嵌套的多步表单？

import React, { useState } from 'react';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    step1: {
      field1: '',
      field2: '',
    },
    step2: {
      field3: '',
      field4: '',
    },
    step3: {
      field5: '',
      field6: '',
    },
  });

  const handleInputChange = (e, stepName) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [stepName]: {
        ...prevState[stepName],
        [name]: value,
      },
    }));
  };

  const handleSubmit = () => {
    // 合并所有步骤的表单数据
    const allFormData = {
      ...formData.step1,
      ...formData.step2,
      ...formData.step3,
    };

    // 执行表单提交操作
    console.log(allFormData);
  };

  const renderStep1 = () => (
    <div>
      <input
        type="text"
        name="field1"
        value={formData.step1.field1}
        onChange={e => handleInputChange(e, 'step1')}
      />
      <input
        type="text"
        name="field2"
        value={formData.step1.field2}
        onChange={e => handleInputChange(e, 'step1')}
      />
    </div>
  );

  const renderStep2 = () => (
    <div>
      <input
        type="text"
        name="field3"
        value={formData.step2.field3}
        onChange={e => handleInputChange(e, 'step2')}
      />
      <input
        type="text"
        name="field4"
        value={formData.step2.field4}
        onChange={e => handleInputChange(e, 'step2')}
      />
    </div>
  );

  const renderStep3 = () => (
    <div>
      <input
        type="text"
        name="field5"
        value={formData.step3.field5}
        onChange={e => handleInputChange(e, 'step3')}
      />
      <input
        type="text"
        name="field6"
        value={formData.step3.field6}
        onChange={e => handleInputChange(e, 'step3')}
      />
    </div>
  );

  const renderForm = () => {
    switch (step) {
      case 1:
        return renderStep1();
      case 2:
        return renderStep2();
      case 3:
        return renderStep3();
      default:
        return null;
    }
  };

  return (
    <div>
      {renderForm()}
      <button onClick={() => setStep(prevStep => prevStep - 1)}>上一步</button>
      {step < 3 && <button onClick={() => setStep(prevStep => prevStep + 1)}>下一步</button>}
      {step === 3 && <button onClick={handleSubmit}>提交</button>}
    </div>
  );
};

export default MultiStepForm;