У меня есть компоненты, в каждом из которых у меня есть одна форма, при нажатии на которую я открываю новую форму (вызывая новый компонент), и когда она последняя, я меняю ее для отправки.
Чего я хочу достичь
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;
Мой полный код песочнице кода
Я просто ищу хороший подход, потому что здесь я не могу поместить отправку в каждый компонент, потому что я должен показывать шаги вверху.