在 POST 返回响应之前防止点击正文答案

【问题标题】：Prevent click on body until POST returns a response在 POST 返回响应之前防止点击正文
【发布时间】：2018-06-10 16:50:05
【问题描述】：

在 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 方法提供响应后不允许点击事件。非常感谢您的帮助！

【问题讨论】：

标签： reactjs post async-await axios

【解决方案1】：

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

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

function preventClickHandler(e) {
    e.preventDefault();
    e.stopPropagation();
}

function preventClick() {
    document.body.addEventListener("click", preventClickHandler);
}

function authorizeClick() {
    document.body.removeEventListener("click", preventClickHandler);

}

【讨论】：