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