Javascript 如何在ReactJS中等待函数直到弹出窗口关闭？

我有一个带有表单的应用程序，当用户希望提交表单时，他们可能需要显示一个弹出窗口。我希望能够创建一个函数，该函数（在提交时）将

等待弹出窗口关闭，然后再继续执行其余的函数代码

伪代码如下：

const onSubmit = useCallback(async (data) => {
    // START FORM CODE
    //...

    // display a pop up that pauses this `onSubmit` code until it is closed
    // while subsequently returning a success boolean

    const isValid = await onShowPopUp(true)

    //...
    // END FORM CODE
}, [])

return (
    <form onSubmit={onSubmit}>
        <input name="test" />
    </form>
)

这类函数在暂停进程时起作用，但是如果使用
false
参数再次调用
onShowPopUp
（这将导致弹出窗口关闭），它不会在
循环时取消上一个
。我认为这是有道理的，因为反应重新渲染

对于这样的场景，使用ReactJS/Javascript的首选方法是什么

谢谢


弹出窗口FWIW是一个材质UI元素，其外观如下所示：

// reminder that showPopUp/setShowPopUp is a useState boolean
<Drawer open={showPopUp} />

//提醒showPopUp/setShowPopUp是一个useState布尔值
如果我们引入类似于
延迟
的东西，会更容易些

// Copied from https://github.com/seangenabe/es6-deferred/blob/master/deferred.js
var Deferred = function() {
  this.promise = new Promise((function(resolve, reject) {
    this.resolve = resolve;
    this.reject = reject;
  }).bind(this));
  
  this.then = this.promise.then.bind(this.promise);
  this.catch = this.promise.catch.bind(this.promise);
};

它可以转换为自定义的react hook
usederferred
。（实际上这里已经有一个包了）

使用此功能，您可以创建一个可由这两个函数访问的延迟对象，
在您的
onShowPopUp
中等待它，以及
在
onClose
中解析它

下面是一个没有材质UI库/React的示例，但我相信这是相同的想法


var Deferred=function（）{
this.promise=新承诺（（函数（解析、拒绝）{
this.resolve=resolve；
这个。拒绝=拒绝；
}).约束（这个）；
this.then=this.promise.then.bind（this.promise）；
this.catch=this.promise.catch.bind（this.promise）；
};
设btn1=document.getElementById（“btn1”）；
设btn2=document.getElementById（“btn2”）；
让延期=新延期（）；
让btn1OnClick=async（）=>{
日志（“等待按钮2点击”）；
等待延期；
控制台日志（“单击按钮1”）；
};
让btn2OnClick=（）=>{
延迟。解决（正确）；
控制台日志（“点击按钮2”）；
};
btn1.addEventListener（“单击”，btn1OnClick）；
btn2.addEventListener（“单击”，btn2OnClick）
按钮1
按钮2
您处理过
抽屉的
onClose
事件吗？@lastr2d2我知道是的，但是如何定义该属性来阻止函数逻辑的进展
// Copied from https://github.com/seangenabe/es6-deferred/blob/master/deferred.js
var Deferred = function() {
  this.promise = new Promise((function(resolve, reject) {
    this.resolve = resolve;
    this.reject = reject;
  }).bind(this));
  
  this.then = this.promise.then.bind(this.promise);
  this.catch = this.promise.catch.bind(this.promise);
};