javascript - React - 当用户点击提交时显示模式，在点击模式按钮之前不要点击端点

Question

我有一个标准的反应形式，它是用反应最终形式构建的。当用户单击提交时，我通过更新状态来显示模态向他们显示模态。模态有两个更新状态的选项。我想在触发 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>

// 这是 onSubmit 方法

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

在模态组件中，根据他们是否接受或拒绝，在表单所在的同一文件中对 setstate 进行回调。api.create在提交时调用该方法之前，我如何等待该状态发生。

标签： javascriptjquery

Answer 1

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();
}