Bagaimana untuk menggunakan makluman tersuai dalam React untuk menukar tab?

Question

Saya sedang mencipta satu react-router 提示，所以在这里我想在您想从一个选项卡切换到另一个选项卡时应用警报消息。我已经应用了警报属性，因为我创建了一个函数 confirmSwitchTab tetapi ia tidak berfungsi. Bagaimanakah saya boleh membuat gesaan itu supaya apabila saya ingin menukar dari satu tab ke tab yang lain dalam setiap laluan, ia memaparkan mesej.

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

Ia tidak berfungsi kerana kod itu tidak menghalang tindakan pautan lalai daripada berlaku. Apabila pautan diklik, tindakan navigasi akan berkuat kuasa serta-merta semasa pengendali onClick yang dilampirkan menjalankan logik lain.

Pengendali klik juga harus menggunakan objek acara klik dan panggil preventDefault padanya untuk menghentikan tindakan navigasi daripada berlaku.

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

Saya percaya terdapat salah faham di sini tentang cara onLeave berfungsi :-)

Membalas benar tidak akan "mengesahkan operasi cuti". Apapun, permintaan cuti akan disahkan. Atribut onLeave hanya akan mengambil fungsi dan mencetuskannya apabila anda meninggalkan halaman. Fungsi ini boleh menjadi petunjuk, seperti di sini, tetapi nilai yang dikembalikan tidak akan digunakan.

Apa yang anda ingin capai mesti diselesaikan sebelum halaman itu benar-benar keluar. Di suatu tempat dalam apl anda, anda sepatutnya mempunyai menu navigasi di mana anda sebenarnya boleh menukar halaman dengan mengklik butang (biasanya menggunakan

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

)

Sekarang di sinilah anda akan menggunakan fungsi tersebut.

Andaikan anda mempunyai sesuatu yang serupa

Home

Anda ingin memanggil fungsi confirmSwitchTab dalam panggilan balik ini.

Anda boleh menukarnya kepada sesuatu seperti ini

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

Semoga ini membantu, sila beritahu saya jika soalan saya salah!

Sola

Selepas mengedit soalan

Cuba ini:

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