我正在建立一個(gè) react-router 提示，所以在這裡我想在您想從一個(gè)選項(xiàng)卡切換到另一個(gè)選項(xiàng)卡時(shí)應(yīng)用警報(bào)訊息。我已經(jīng)應(yīng)用了警報(bào)屬性，因?yàn)槲覄?chuàng)建了一個(gè)函數(shù) confirmSwitchTab，但它不起作用。如何發(fā)出該提示，以便當(dāng)我想在每條路線中從一個(gè)選項(xiàng)卡切換到另一個(gè)選項(xiàng)卡時(shí)，它會(huì)顯示該訊息。
import { React, useState } from "react";
import { Link } from "react-router-dom";
import LoadingBar from "react-top-loading-bar";
import { useNavigate } from "react-router-dom";
export default function Demo() {
const [progress, setProgress] = useState(0);
const navigate = useNavigate();
function confirmSwitchTab() {
//Prompt the user with a confirm message.
var result = confirm("Are you sure you want to switch tabs?");
//If the user confirms, return true, else return false.
if (result) {
return true;
} else {
return false;
}
}
const onClick = () => {
const userConfirmsSwith = confirmSwitchTab()
if (userConfirmsSwith) navigate("/")
// else you don't do anything.
}
return (
<>
<LoadingBar
color="blue"
progress={progress}
onLoaderFinished={() => setProgress(0)}
waitingTime={800}
loaderSpeed={100}
height={4}
/>
<ul
style={{
display: "flex",
justifyContent: "space-around",
listStyle: "none"
}}
>
<li>
<Link
to="/"
onClick={() => {
onClick();
setTimeout(() => setProgress(100), 500)
}}
>
Home
</Link>
</li>
<li>
<Link
to="/about"
onClick={() => {
onClick();
setTimeout(() => setProgress(100), 500)
}}
>
About
</Link>
</li>
</ul>
</>
);
}
2
0
0
它不起作用，因?yàn)槌淌酱a不會(huì)阻止預(yù)設(shè)連結(jié)操作的發(fā)生。點(diǎn)擊鏈接，導(dǎo)航操作立即生效，同時(shí)附加的 onClick 處理程序正在運(yùn)行其他邏輯。
點(diǎn)擊處理程序也應(yīng)該使用點(diǎn)擊事件物件並對(duì)其呼叫 preventDefault 以停止發(fā)生導(dǎo)航操作。
export default function Demo() {
const [progress, setProgress] = useState(0);
const navigate = useNavigate();
function confirmSwitchTab() {
//Prompt the user with a confirm message.
return confirm("Are you sure you want to switch tabs?");
}
const clickHandler = (target = "/") => (e) => {
e.preventDefault(); // setProgress(100), 500);
if (confirmSwitchTab()) {
navigate(target);
}
// else you don't do anything.
}
return (
我相信這裡對(duì) onLeave 的工作原理有誤解:-)
傳回 true 不會(huì)「確認(rèn)離開操作」。無論如何，請(qǐng)假動(dòng)作都會(huì)被確認(rèn)。 onLeave 屬性將簡(jiǎn)單地取得函數(shù)並在您離開頁面時(shí)觸發(fā)它。這個(gè)函數(shù)可以是一個(gè)提示，就像這裡一樣，但傳回的值不會(huì)被使用。
您想要實(shí)現(xiàn)的目標(biāo)必須在頁面實(shí)際離開之前完成。在您的應(yīng)用程式中的某個(gè)位置，您應(yīng)該有一個(gè)導(dǎo)航選單，您可以在其中實(shí)際透過點(diǎn)擊按鈕來更改頁面（通常使用
history.push("My/New/Path")
)
現(xiàn)在這就是您要使用函數(shù)的地方。
假設(shè)你有類似的東西
您想在該回呼中呼叫confirmSwitchTab 函數(shù)。
你可以把它改成類似的
const onClick = () => {
const userConfirmsSwith = confirmSwitchTab()
if (userConfirmsSwith) history.push('home')
// else you don't do anything.
}
希望這對(duì)您有幫助，如果我的問題有誤，請(qǐng)告訴我！
乾杯
問題編輯後
#試試這個(gè)：
import { React, useState } from "react";
import LoadingBar from "react-top-loading-bar";
import { useNavigate } from "react-router-dom";
export default function Demo() {
const [progress, setProgress] = useState(0);
const navigate = useNavigate();
function confirmSwitchTab() {
//Prompt the user with a confirm message.
var result = confirm("Are you sure you want to switch tabs?");
//If the user confirms, return true, else return false.
if (result) {
return true;
} else {
return false;
}
}
const onClick = (path) => {
setTimeout(() => setProgress(100), 500)
const userConfirmsSwith = confirmSwitchTab()
if (userConfirmsSwith) navigate(path)
// else you don't do anything.
}
return (
setProgress(0)}
waitingTime={800}
loaderSpeed={100}
height={4}
/>
-
-
>
);
}
