React js -在Ant设计步骤中保存之前的值

import React, { useState } from 'react';
import { Steps } from 'antd';

const { Step } = Steps;

const ParentComponent = () => {
  const [stepValues, setStepValues] = useState({}); // 保存步骤的值

  return (
    <>
      <Steps current={currentStep}>
        <Step title="步骤一" />
        <Step title="步骤二" />
        <Step title="步骤三" />
      </Steps>
      
      <ChildComponent
        currentStep={currentStep}
        stepValues={stepValues}
        setStepValues={setStepValues}
      />
    </>
  );
};

const ChildComponent = ({ currentStep, stepValues, setStepValues }) => {
  const handleInputChange = (e) => {
    const { value } = e.target;
    setStepValues({ ...stepValues, [currentStep]: value });
  };

  const handleNextStep = () => {
    // 进入下一步操作
  };

  return (
    <div>
      {currentStep === 1 && (
        <input type="text" value={stepValues[currentStep] || ''} onChange={handleInputChange} />
      )}
      {currentStep === 2 && (
        <div>
          上一步的值：{stepValues[currentStep - 1]}
          <button onClick={handleNextStep}>下一步</button>
        </div>
      )}
    </div>
  );
};

// 省略Redux的相关配置和代码

const ParentComponent = () => {
  return (
    <>
      <Steps current={currentStep}>
        <Step title="步骤一" />
        <Step title="步骤二" />
        <Step title="步骤三" />
      </Steps>
      
      <ChildComponent />
    </>
  );
};

const ChildComponent = ({ stepValues, setStepValues }) => {
  const handleInputChange = (e) => {
    const { value } = e.target;
    setStepValues(value);
  };

  const handleNextStep = () => {
    // 进入下一步操作
  };

  return (
    <div>
      {currentStep === 1 && (
        <input type="text" value={stepValues} onChange={handleInputChange} />
      )}
      {currentStep === 2 && (
        <div>
          上一步的值：{stepValues}
          <button onClick={handleNextStep}>下一步</button>
        </div>
      )}
    </div>
  );
};

// 使用connect方法将store中的值注入到步骤组件中
const mapStateToProps = (state) => ({
  stepValues: state.stepValues,
});

const mapDispatchToProps = (dispatch) => ({
  setStepValues: (value) => dispatch({ type: 'SET_STEP_VALUES', payload: value }),
});

export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);