2

我在我的反应项目中使用 Material UI 多步表单。我有一个要求，即根据当前选择的选项打开表单的下一步。

例如，如果有两个选项 A 和 B。如果我选​​择选项 A，那么下一步将有与 A 相关的选项，如果我选择选项 B，那么下一步将有与 B 相关的选项。

这就是我的代码根据当前步骤呈现组件的方式：

 function getStepsContent(stepIndex) {
  switch (stepIndex) {
  case 0:
    return <StepOne handleChange={handleChange} values={values} />;
  case 1:
    return 'Step Two (choose plan)';
  case 2:
    return 'Step three (checkout)';
  default:
    return 'unknown step';
 }
}

这是我定义表单步骤的初始函数：

function getSteps() {
 return ['sign up', 'choose plan', 'checkout'];
}

我不确定这是否正确。

您能否根据条件向我建议实现表单组件的正确方法？

提前致谢。

4

1 回答 1

0

这是一个很好的方法，而不是制作返回步骤的函数，您可以将它们设为正常值，const例如：

const steps = ['sign up', 'choose plan', 'checkout'];

然后.map通过它们使用您的getStepsContent功能：

steps.map(item => getStepsContent(item))
于 2021-04-21T10:02:11.180 回答