Блог

У меня есть стандартная форма в react, которая построена с окончательной формой react. Когда пользователь нажимает «Отправить», я показываю им модальное состояние, обновляя состояние, чтобы показать модальное. Модальный имеет два варианта, которые обновляют состояние. Я хочу дождаться, пока будет нажата одна из опций, прежде чем запускать конечную точку post.

Вот форма

   <div>
    <Wrapper>
      <Form
        onSubmit={onSubmit}
        render={({ handleSubmit }) => (
          <form onSubmit={handleSubmit} noValidate>
            // Fields are here
            <Modal
              isOpen={showModal}
              handleAcceptClick={handleAcceptClick}
              handleDeclineClick={handleDeclineClick}
            />
            <Button
              buttonType="submit"
            />
          </form>
        )}
      />
    </Wrapper>
  </div>
 

// Это субподрядный метод

   async function onSubmit(submission: Payload) {
    setShowModal(true);
    
    await api.create({
      submission,
    });
  }
 

В модальном компоненте есть обратный вызов setstate в том же файле, в котором находится форма, в зависимости от того, принимают они или отклоняют. Как я могу дождаться этого состояния, прежде чем вызывать api.create метод при отправке?

HTML:

 <div>
    <Wrapper>
        <Form
        onSubmit={onSubmit}
        render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit} noValidate>
        // Fields are here
            <Modal
                isOpen={showModal}
                handleAcceptClick={handleAcceptClick}
                handleDeclineClick={handleDeclineClick}
            />
            <Button
                buttonType="button"
                onClick={confirm}
            />
        </form>
        )}
        />
    </Wrapper>
</div>
 

КОД JS:

 function confirm() {
    setShowModal(true);
}

// call this function on click of one option in modal
function onConfirm(){
    onSubmit();
}