Material UI Stepper 在下一个或后退时不保持状态答案

【问题标题】：Material UI Stepper not keeping state when move next or backMaterial UI Stepper 在下一个或后退时不保持状态
【发布时间】：2020-04-14 19:09:30
【问题描述】：

我有Material UI Stepper 组件。我在ADD 按钮上动态渲染stepper。每个步骤都包括一些表格，包括TextFields, SelctBox etc.当我在第一步填写表格并单击下一步以在下一个屏幕上填写表格时，如果我通过单击BACK Button返回第一步，我将丢失第一步填写的数据。

所以问题是 - 当我们改变步骤时，有没有办法将数据保留在 Form Fields 中？

我在下面尝试过，但不明白如何在父组件上存储状态。

export default function FeaturesSteppers(props) {

.......
const [stepperState, setStepperState] = React.useState({});

const getStepContent = step => {
switch (step) {
  case 0:
    return <Profile 
      index={index} 
      form={form} 
      stepperState={stepperState}
      onUpdateStepperState={handleUpdateStepper}
    />;
  case 1:
    return "< Step1 />";
  case 2:
    return "< Step2 />";
  case 3:
      return "< Step3 />";
  default:
    return "Unknown step";
}
}

.........

const handleUpdateStepper = (data) => {
  console.log('INSIDE Handle Update')
  setStepperState(...)
};

我不确定我应该从Profile.js 返回什么以及如何在父组件上使用它。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您的代码的问题是，一旦您从第 0 步转到第 1 步 - <Profile /> 组件不再存在，如果它是子组件及其内部状态，则所有组件都不再存在。您可以将内部状态保存到某个全局状态/上下文中，一旦组件再次进入 DOM，它将重新加载内容，但是您可以只渲染所有步骤，但隐藏不相关的步骤：

const getStepContent = step => {

    const allSteps = [
        <Profile 
            index={index} 
            form={form} 
            stepperState={stepperState}
            onUpdateStepperState={handleUpdateStepper}
        />,
        <Step1 />,
        <Step2 />,
        <Step3 />
    ];

    return (
        <>
            {allSteps.map(
                (stepCmp, index) => {
                    return <div hidden={index !== step}>{stepCmp}</dv>
                })
            }
        </>
    );
}

这里的缺点是您确实需要在实际显示所有组件之前渲染它们。

【讨论】：

【解决方案2】：

您的问题已经 7 个月大了，我遇到了同样的问题，导致我来到这里。为了那些以后需要这个的人，这是我修复我的方法。

您必须确保所有<TextField/> 输入值都由您的父状态管理。
您必须将每个 <TextField /> 的值作为道具传递给您的子组件。

考虑下面的例子：

   function Parent(){
      const [ values, setName ] = React.useState({
         name: "",
         email: "",
      });
      
      return (
         <Step1 inputValues = { values } />
      )
   }

那么你的子组件将如下所示：

   function Step1({ inputValues }){      
      return (
         <div>
            <TextField value={ inputValues.name } />
            <TextField value={ inputValues.email } />
         </div>
      )
   }

如果您离开并返回到步进器索引，您的数据将保留。

【讨论】：