Comment utiliser l'alerte personnalisée dans React pour changer d'onglet ?

Question

J'en crée un react-router 提示，所以在这里我想在您想从一个选项卡切换到另一个选项卡时应用警报消息。我已经应用了警报属性，因为我创建了一个函数 confirmSwitchTab mais ça ne marche pas. Comment puis-je créer cette invite afin que lorsque je souhaite passer d'un onglet à un autre dans chaque itinéraire, elle affiche le message.

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

Cela ne fonctionne pas car le code n'empêche pas l'action de lien par défaut de se produire. Lorsqu'un lien est cliqué, l'action de navigation prend effet immédiatement pendant que le gestionnaire onClick attaché exécute une autre logique.

Le gestionnaire de clics doit également utiliser l'objet événement click et appeler preventDefault dessus pour empêcher l'action de navigation de se produire.

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

Je pense qu'il y a un malentendu ici sur le fonctionnement de onLeave :-)

Rendre true ne « confirmera pas l’opération de congé ». Quoi qu’il en soit, la demande de congé sera confirmée. L'attribut onLeave prendra simplement une fonction et la déclenchera lorsque vous quitterez la page. Cette fonction peut être un indice, comme ici, mais la valeur renvoyée ne sera pas utilisée.

Ce que vous souhaitez réaliser doit être terminé avant que la page ne quitte réellement. Quelque part dans votre application, vous devriez avoir un menu de navigation dans lequel vous pouvez réellement changer de page en cliquant sur un bouton (généralement en utilisant

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

)

C'est maintenant ici que vous allez utiliser la fonction.

Supposons que vous ayez quelque chose de similaire

Home

Vous souhaitez appeler la fonction confirmSwitchTab dans ce rappel.

Vous pouvez le changer en quelque chose comme ça

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

J'espère que cela vous aidera, faites-moi savoir si ma question est fausse !

Bravo

Après avoir modifié la question

Essayez ceci :

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