阻止单击正文，直到开机自检返回响应

Question

在 React 应用程序上，我想阻止单击正文，直到 POST 方法返回响应，然后允许用户再次单击正文。

我该怎么做？这是我尝试做的：

async post() {
try {
this.preventClick();
await axios.post(`${url}`, data);
this.authorizeClick();
} catch (err) {
console.log(err);
}
}
click = (e) => {
e.preventDefault();
e.stopPropagation();
}
preventClick = (e) => {
document.body.addEventListener("click", this.click);
};
authorizeClick = (e) => {
document.body.removeEventListener("click", this.click);
};

不幸的是，这只会阻止单击，但在 POST 方法提供响应后不允许单击事件。帮助将不胜感激！

Answer 1

当你调用removeEventListener时，你必须传递给它你想要删除的函数。

您正在向它传递一个新函数(尽管是相同的函数(，该函数未绑定为事件侦听器，因此无法将其删除。

function preventClickHandler(e) {
e.preventDefault();
e.stopPropagation();
}
function preventClick() {
document.body.addEventListener("click", preventClickHandler);
}
function authorizeClick() {
document.body.removeEventListener("click", preventClickHandler);
}