資訊專欄INFORMATION COLUMN
摘要：在業務場景中，某些頁面頁面生成的數據離開頁面未保存時需要提示操作者是否確認離開當前頁面，如果用系統的提示的信息難免有點太丑，顯得和頁面樣式格格不入。
在業務場景中，某些頁面（頁面生成的數據離開頁面未保存）時需要提示操作者是否確認離開當前頁面，如果用系統的提示的信息難免有點太丑，顯得和頁面樣式格格不入。*
下面是我用react版本結合antd的實現 需要的同學可以參考下哈
這是實現提示的效果哦~
首先需要依賴這個這個插件 react-router-navigation-prompt
下面是具體的代碼
import React from "react";
import {
Modal,
} from "antd";
import NavigationPrompt from "react-router-navigation-prompt";
const confirm = Modal.confirm;
class RouterAlert extends React.Component {
// 設置當前路由切換時是否切換 可根據具體業務操作
state = {
isWhen: false,
};
render() {
const { isWhen } = this.state;
return (
/**
* @param crntLocation 當前路由路徑數據
* @param nextLocation 要切換的路由路徑數據
* pathname 代表路徑的值
* * */
{
if (isWhen && crntLocation.pathname !== nextLocation.pathname) {
return true;
}
return false;
}
}
>
/**
* @param onConfirm 確定離開調用當前函數
* @param onCancel 不離開時調用當前函數
* * */
{({ onConfirm, onCancel }) => {
confirm({
title: "檢測到您還有數據未保存，確定離開嗎？",
onOk() {
onConfirm();
},
onCancel() {
onCancel();
},
});
}}
);
}
}
好了~ 這個效果就實現了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103896.html
摘要：還是先來一段官方的基礎使用案例，熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件，作為的頂層組件來獲取的和設置回調函數來更新。 react-router是react官方推薦并參與維護的一個路由庫，支持瀏覽器端、app端、服務端等常見場景下的路由切換功能，react-router本身不具備切換和跳轉路由的功能，這些功能全部由react-router依賴的history庫完成，his...
摘要：還是先來一段官方的基礎使用案例，熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件，作為的頂層組件來獲取的和設置回調函數來更新。 react-router是react官方推薦并參與維護的一個路由庫，支持瀏覽器端、app端、服務端等常見場景下的路由切換功能，react-router本身不具備切換和跳轉路由的功能，這些功能全部由react-router依賴的history庫完成，his...
摘要：它是官方維護的，事實上也是唯一可選的路由庫。表示的這個部分是可選的。另一種做法是，使用指定當前路由的。而組件會使用路徑的精確匹配。否則用戶直接向服務器請求某個子路由，會顯示網頁找不到的錯誤。 真正學會 React 是一個漫長的過程。 你會發現，它不是一個庫，也不是一個框架，而是一個龐大的體系。想要發揮它的威力，整個技術棧都要配合它改造。你要學習一整套解決方案，從后端到前端，都是全新的做...
摘要：前言項目有個需求是跳轉路由，在離開頁面前，需要彈框詢問用戶是否確定離開。 showImg(https://segmentfault.com/img/remote/1460000019105899); 前言：項目有個需求是：跳轉路由，在離開頁面前，需要彈框詢問用戶是否確定離開。用react-router的組件是可以的，但是，怎么使用antd組件（或者說自定義組件）呢？請看下面 先看的這個...
閱讀 1171·2021-11-24 09:39
閱讀 2674·2021-09-28 09:35
閱讀 1070·2019-08-30 15:55
閱讀 1361·2019-08-30 15:44
閱讀 879·2019-08-29 17:00
閱讀 1969·2019-08-29 12:19
閱讀 3310·2019-08-28 18:28
閱讀 690·2019-08-28 18:10
