React中如何使用自訂警報切換選項卡？

Question

我正在建立一個 react-router 提示，所以在這裡我想在您想從一個選項卡切換到另一個選項卡時應用警報訊息。我已經應用了警報屬性，因為我創建了一個函數 confirmSwitchTab，但它不起作用。如何發出該提示，以便當我想在每條路線中從一個選項卡切換到另一個選項卡時，它會顯示該訊息。

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>
    </>
  );
}

Answer 1

它不起作用，因為程式碼不會阻止預設連結操作的發生。點擊鏈接，導航操作立即生效，同時附加的 onClick 處理程序正在運行其他邏輯。

點擊處理程序也應該使用點擊事件物件並對其呼叫 preventDefault 以停止發生導航操作。

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(); // <-- halt link navigation

    setTimeout(() => setProgress(100), 500);

    if (confirmSwitchTab()) {
      navigate(target);
    }
    // else you don't do anything.
  }

  return (
    <>
      
      

        

          
            Home
          
        
        

          
            About
          
        
      
    
  );
}

Answer 2

我相信這裡對 onLeave 的工作原理有誤解:-)

傳回 true 不會「確認離開操作」。無論如何，請假動作都會被確認。 onLeave 屬性將簡單地取得函數並在您離開頁面時觸發它。這個函數可以是一個提示，就像這裡一樣，但傳回的值不會被使用。

您想要實現的目標必須在頁面實際離開之前完成。在您的應用程式中的某個位置，您應該有一個導航選單，您可以在其中實際透過點擊按鈕來更改頁面（通常使用

history.push("My/New/Path")

)

現在這就是您要使用函數的地方。

假設你有類似的東西

Home

您想在該回呼中呼叫confirmSwitchTab 函數。

你可以把它改成類似的

const onClick = () => {
  const userConfirmsSwith = confirmSwitchTab()
  if (userConfirmsSwith) history.push('home')
  // else you don't do anything.
}
Home

希望這對您有幫助，如果我的問題有誤，請告訴我！

乾杯

問題編輯後

#試試這個：

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}
      />
      

        

           {onClick("/")}>
            Home
          
        
        

           {onClick("/about")}>
            About
          
        
      
    
  );
}