时间戳

首页 > 解决方案 > Material-UI 动态 Stepper 组件

reactjs - Material-UI 动态 Stepper 组件

问题描述

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

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

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

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

标签： reactjsmaterial-ui

解决方案

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

像这样：

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 的每个实例都使用自己的活动步长值。

推荐阅读