Материал-интерфейс Dynami c Шаговый компонент

Question

Я хочу отобразить динамический c Шаговый компонент Material-UI , когда пользователь нажимает ADD, этот шаговый компонент должен добавить в пользовательский интерфейс. Я могу добавлять компоненты степпера динамически, но проблема в том, что при нажатии NEXT, BACK или SKIP все добавленные компоненты шага на экране перемещаются соответственно.

Например, если у меня есть три шаговых компонента на экране. Когда я нажимаю кнопку NEXT на любом из этих компонентов, все три компонента перемещаются дальше.

Я не уверен, как мне управлять useState шагового компонента Material-UI.

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

Answer 1

Чтобы каждый из ваших компонентов 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}
    </>
  );
}

Рабочая динамическая c здесь реализована многоступенчатая форма :

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

Также поочередно , вы можете поддерживать activeStep в компоненте Stepper, чтобы каждый экземпляр Stepper использовал свое собственное значение активного шага.