Submit在反应中形成数据

Question

我有3个组件，在下一次单击时，我有3个表单，我正在打开一个新表单，最后一次是将其更改为提交。

我想实现什么

1：在每个下一个并向后单击我要验证我的表单

2：单击提交，我应该能够看到所有数据

3：单击后退数据时，不应从输入中丢失

所以为了验证，我正在使用react-hook-form，因为它非常简单，但是在这里我无法找出原因，因为我的按钮不在主要组件的表单内，所以我将如何验证并提交提交表单后，单击所有数据。

我的代码

import React, { useState } from "react";
import Form1 from "./components/Form1";
import Form2 from "./components/Form2";
import Form3 from "./components/Form3";

function AddCompanyMain() {
  const [currState, setCurrState] = useState(1);
  const [allState, setAllstate] = useState(3);

  const moveToPrevious = () => {
    setCurrState(currState - 1);
  };
  const moveToNext = () => {
    setCurrState(currState + 1);
  };

  return (
    <div>
      <div class="progress">
        <div>{currState}</div>
      </div>

      {currState === 1 && <Form1 />}
      {currState === 2 && <Form2 />}
      {currState === 3 && <Form3 />}

      {currState !== 1 && (
        <button
          className="btn btn-primary"
          type="button"
          onClick={moveToPrevious}
        >
          back
        </button>
      )}
      {currState !== allState && (
        <button className="btn btn-primary" type="button" onClick={moveToNext}>
          next
        </button>
      )}

      {currState === 3 && (
        <button className="btn btn-primary" type="submit">
          Submit
        </button>
      )}
    </div>
  );
}

export default AddCompanyMain;

我的完整代码Code sandbox

我正在寻找一种好的方法，因为在这里我不能在每个组件中都提交，因为我必须在顶部显示步骤。

Answer 1