Как проверить, может ли форма быть отправлена за пределы компонента

#reactjs #react-hook-form

Вопрос:

Я использую крюк формы React, и я делаю страницу регистрации, которая разделена на этапы с различными формами, я хочу проверить, правильно ли была отправлена форма, прежде чем переходить к следующему шагу, но отправкой управляет форма крючка React в другом компоненте

Я пытался слушать, когда форма была отправлена:

 useEffect(() => {
   if(steps amp;amp; step){
      document.getElementById(steps[step].form).addEventListener('submit', () => {
         if (step !== 2) setStep(step   1)
      })
   }}, [step, steps])
 

Я также пытался создать кнопку отправки каждый раз, когда мы нажимаем кнопку «далее», но она тоже не работает

Кстати, это кнопка «далее»

 <button type='submit' form={steps[step].form} className="hvr-i-right">
    {step !== 2 ? 'Next' : 'Finish'}
    <i className="material-icons hvr-i">arrow_forward</i>
</button>
 

Комментарии:

1. можете ли вы, пожалуйста, добавить пример, чтобы я мог помочь больше

2. ibb.co/fY0PtXR Я хочу, чтобы вы не могли нажать кнопку Далее, прежде чем заполните всю необходимую информацию в форме