切换 ui 选项卡时警告用户答案

【问题标题】：Warn user when switching ui tab切换 ui 选项卡时警告用户
【发布时间】：2021-04-08 14:31:44
【问题描述】：

选项卡中有一个编辑器，如果用户没有保存编辑器内容并切换到其他 ui 选项卡，则未保存的内容会随着 react 组件的卸载而丢失。

我已经尝试过 React Router Prompt，这仅在路由 url 更改时才有效。在我的情况下，路由 url 不会改变。我使用了材质 ui 选项卡。

 <Prompt
    when={editorContentSaved}
    message="Are you sure you want to leave?"
 />

我在 useEffect 返回函数中尝试了 JavaScript 确认框，该函数在取消安装之前被调用，但这不会阻止用户导航。我唯一能做的就是决定用户是否要保存内容。但无法停止导航。

useEffect(() => {
    return () => {
        let confirmValue = window.confirm("Do you want to save the changes?");
    }
})

当路由没有改变但组件发生改变时如何警告用户。

【问题讨论】：

似乎您应该对两者进行一些变体，一种是防止路由转换，另一种是防止制表符转换。签入useEffect 清理功能为时已晚，此时用户所在的选项卡已卸载。
一种解决方法是您可以禁用您创建的材料 UI 选项卡，直到用户不保存表单
@DrewReese 我只需要防止标签转换。我找到的所有解决方案都与路由转换有关，如 react-router promt、setRouteLeaveHook 等。但与阻止选项卡转换无关。
@4nkitpatel 这将影响用户体验。我的用例是我必须在切换到其他选项卡时显示一个模式而不保存当前选项卡的内容。

标签： javascript reactjs

【解决方案1】：

我想你可以以这种方式防止标签更改：

在handleChange 函数中，您确定用户是否正在离开编辑器选项卡以及您是否需要停止/警告他们（即是否有任何未保存的更改？），如果是，您无需更改标签。

这是一个示例：（假设标签0 是编辑器标签）

  const handleChange = (event, newValue) => {
    if (newValue !== 0 && value === 0) {
      const res = window.confirm("Leaving?");
      if (res === true) {
        setValue(newValue);
      }
    } else {
      setValue(newValue);
    }
  };

这是codesandbox example

【讨论】：