javascript - 如何处理 LWC 组件中未保存的更改？

Question

我正在尝试在 LWC 组件中实现未保存的更改功能。尝试了各种方法，包括使用 javascript 和 jquery 并尝试在 onbeforeunload 上触发它，但事情似乎不起作用。在 HTML 页面上也是如此，但在 LWC 中却不如预期。

我尝试在 util 类中使用以下代码：

const handleUnsavedChangesValidation = (hasModifiedData, updateClicked) => {

    console.log('>>>:::INN::hasModifiedData::', hasModifiedData);
    console.log('>>>:::INN::updateClicked::', updateClicked);

    var modified = hasModifiedData && !updateClicked ? true : false;     
    
    if(modified) {

        addEventListener("beforeunload", (evt) => {

            const unsaved_changes_warning = "Changes you made may not be saved.";
                                   
            evt.returnValue = unsaved_changes_warning;
            
            return unsaved_changes_warning;
        });
    }
    else
    {
          removeEventListener("beforeunload", () => {                 
            
            return true;
        });
    }
}

在对输入字段进行任何更改时，我尝试使用这些参数调用以下方法：handleUnsavedChangesValidation(true, false)

单击保存按钮时，我尝试调用此 handleUnsavedChangesValidation(true, true);

在尝试上述方法时，它部分工作正常：

加载时 -> 不显示警报（如预期的那样）

输入更新 -> 如果按下刷新（警报显示 - 预期）

在输入更新时 -> 如果单击选项卡被按下（警报显示 - 预期）

在输入更新时 -> 如果单击浏览器后退按钮（它无法显示警报）

在输入更新时 - > 如果单击更新按钮（它仍然显示警告，说明未保存的更改，然后单击确定它会保存。这也不是预期的。此处不应显示警告）

保存后 -> 页面刷新 -> 现在会显示警报，这也是意料之外的。

如果我再次单击刷新，它不会显示警报。

我被循环并尝试通过静态资源和其他方式找到许多方法来处理这个问题，但在这里无法做任何事情。试图将空白传递给卸载的返回值但没有结果。尝试传递 return true 以及 return false。然而，当我们点击保存时，它似乎会显示一个警报。

任何人都知道任何替代方案，或者有人可以在这里帮助我。我正在寻找一种适用于 LWC 实现而不仅仅是 html javascript 的解决方案。

请帮助极客。非常感谢任何帮助。

提前谢谢，注意安全。

问候， 拉杰什

标签： javascriptsalesforce-lightninglwc