reactjs - antd v4 - 步骤和表格

Question

我是 React 的新手，我正在玩 ant 设计。我需要构建一个多步骤表单，其中每个步骤都有几个字段，最后一步将有一个提交按钮。这将使用来自 antd 的 useForm 钩子(Hook)。我不想使用任何其他插件，如 antd-form-b​​uilder 等。
我面临的问题是，在多步骤表单中，在最后一步，当我按下提交时，最后一步的表单数据可用，而前面步骤的数据不可用。我认为这可能是因为当我进入“下一步”步骤时，该步骤正在 DOM 中被替换。
有没有更简单的方法可以在最后一步从所有表单中获取数据？
我已经为示例准备了一个codeandbox..提交后引用控制台。
https://codesandbox.io/s/cool-mcnulty-or8jw
谢谢您的帮助!

Answer 1

是的，这是因为当你没有在 DOM 中显示它们时，你的步骤被破坏了。
向您的步骤数组添加一个步骤，如下所示:

const steps = [
    {
      step: 1,
      title: "Step1",
      content: <Step1Form />
    },
    {
      step: 2,
      title: "Step2",
      content: <Step2Form />
    }
];

然后在你的 css 文件中定义一个新类:

.hidden { display: none; }

最后，在您的 StepPanel.js文件将步骤的渲染方法更改为此。我们将渲染所有步骤:

{props.steps.map((item) => (
    <div
      className={`steps-content ${
        item.step !== activeStep + 1 && "hidden"
      }`}
    >
      {item.content}
    </div>
))}

如您所见，我们正在检查每个步骤的步骤编号是否等于当前事件的步骤。您可以更改沙箱的 fork 版本 here .