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