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时，您必须将要删除的功能传递给它。

您正在传递一个 new 函数（虽然是一个相同的函数），它不会被绑定为事件监听器，因此无法将其删除。

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

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

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

}

阻止单击body直到POST返回响应

1 个答案: