Question

我有Material UI Stepper组件。我正在stepper按钮上动态渲染ADD。每个步骤都包含一些表单，其中包括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返回什么，以及如何在父组件上使用它。

Answer 1

代码的问题在于，一旦您从步骤＃0转到步骤＃1-library(dplyr) library(stringr) x %>% rename_at(vars(matches('\\.{3}\\d+$')), ~ str_remove(., "\\.{3}\\d+$"))组件将不复存在，如果它是子组件及其内部状态，则也将不复存在。您可以将内部状态保存到某个全局状态/上下文中，一旦该组件再次进入DOM，该状态/上下文将重新加载内容，但是您可以仅呈现所有步骤，而隐藏不相关的步骤：

<Profile />

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

Answer 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>
      )
   }

如果您导航并返回到步进索引，您的数据将保留。

上一个或下一个移动时，材质UI步进器不保持状态

2 个答案: