Material-UI 动态 Stepper 组件

Question

我想在用户点击ADD 时显示一个动态的Material-UI Stepper Component，这个步进器组件应该添加到 UI 中。 我可以动态添加步进器组件，但问题是当单击NEXT、BACK 或SKIP 时，屏幕上所有添加的步进器组件都会相应移动。

例如，如果我在屏幕上有三个步进器组件。当我单击其中任何一个组件上的NEXT 按钮时，所有三个组件都将移动。

我不确定如何管理 Material-UI 步进器组件的useState。

form.values.profile.map((x, idx) => {
  //Stepper Component rendering
})

Answer 1

为了让您的每个 Stepper 组件单独工作，您可以为每个 Stepper 组件维护单独的 activeStep 值。

像这样：

export default function App() {
  const [steppers, setSteppers] = useState([{ activeStep: 0 }]);

  const addForm = () => {
    setSteppers(steppers.concat({ activeStep: 0 }));
  };

  const updateActiveStep = (index, count) => {
    setSteppers(prev =>
      prev.map((stepper, i) => {
        if (i === index) {
          return { ...stepper, activeStep: stepper.activeStep + count };
        }

        return stepper;
      })
    );
  };

  const handleReset = index => {
    setSteppers(prev =>
      prev.map((stepper, i) => {
        if (i === index) {
          return { ...stepper, activeStep: 0 };
        }
        return stepper;
      })
    );
  };

  console.log("stepper", steppers);
  const stepperForms = steppers.map((stepper, index) => (
    <MyStepper
      activeStep={stepper.activeStep}
      handleReset={() => handleReset(index)}
      setActiveStep={count => updateActiveStep(index, count)}
    />
  ));
  return (
    <>
      <button onClick={addForm}>add form</button>
      {stepperForms}
    </>
  );
}

工作的动态多步骤表单实现在这里：

https://codesandbox.io/s/upbeat-bhabha-i5wr2?file=/src/Stepper.js

另外，您可以在 Stepper 组件中维护 activeStep，以便 Stepper 的每个实例都使用自己的活动步值。