Taro框架 微信H5 表单返回添加挽留弹窗

路由守卫

 const [lock, setLock] = useState(true);

useDidShow(() => {
    setLock(true);
  });

 useEffect(() => {
    if (!isWXOrWeb()) {
      let unblock;
      if (lock) {
        unblock = history.block(tx => {
          // 只监听页面回退
          if (tx.action === 'POP') {
            if (!isEqual(formatValue(ref.current), formatValue(form.getFieldsValue()))) {
                // 判断表单内容是否变化，注意要用ref实时获取form表单的值，不然只会获 取一次最初的值
              Taro.showModal({
                title: '确定退出吗',
                content: '退出后未暂存的资料将不会保存，请暂存后再退出',
                confirmColor: '#00B5DB',
                success: function (res) {
                  if (res.confirm) {
                    unblock();
                    setLock(false);
                    // 异步回退，不要直接写回退
                    setTimeout(() => {
                      Taro.navigateBack({
                        delta: 1,
                      });
                    }, 50);
                  } else if (res.cancel) {
                  }
                },
              });
            } else {
              setTimeout(() => {
                unblock();
                setLock(false);
                Taro.navigateBack({
                  delta: 1,
                });
              }, 50);
            }
          } else {
            setTimeout(() => {
              unblock();
              setLock(false);
              tx.retry();
            }, 50);
          }
        });
      } else {
        unblock && unblock();
      }
      return () => setLock(false);
    }
  }, [lock]);