如何在React.js中实现点击导航栏Pop Up按钮触发弹窗功能？

Got it, let's figure out why your popup isn't triggering when clicking the "Pop Up" button in the Navbar. Here are the key issues and step-by-step fixes:

What's Wrong Right Now #

1. Your Navbar's "Pop Up" link is just a plain <a> tag with no event tied to it—there's no connection between clicking it and updating the popup's visibility state.
2. The buttonPopup state in your App component is initialized to true, so the popup would show up immediately (not when you click the button).
3. The "Close" text in your PopUp component doesn't have any event to hide the popup when clicked.

Fixed Code Components #

1. Updated App Component

We'll manage the popup state here, pass click handlers to both Navbar and PopUp, and make sure the popup is hidden by default:

import "./App.css";
import PopUp from "./components/popup";
import Navbar from "./components/Navbar"; // Don't forget to import Navbar!
import { useState } from "react";

function App() {
  const [isPopupVisible, setIsPopupVisible] = useState(false); // Default to hidden

  return (
    <div className="App">
      {/* Pass a handler to Navbar to show the popup */}
      <Navbar onShowPopup={() => setIsPopupVisible(true)} />
      {/* Pass visibility state and close handler to PopUp */}
      <PopUp 
        trigger={isPopupVisible} 
        onClose={() => setIsPopupVisible(false)} 
      />
    </div>
  );
}

export default App;

2. Updated Navbar Component

We'll replace the <a> tag with a button (or prevent default link behavior) and wire up the click handler from App:

import React from "react";

function Navbar({ onShowPopup }) {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item active">
            <a className="nav-link" href="/">
              Home
            </a>
          </li>
          <li className="nav-item">
            {/* Use a button to avoid unwanted page navigation */}
            <button 
              className="nav-link btn btn-link" 
              onClick={onShowPopup}
              style={{ padding: 0, textDecoration: "underline" }}
            >
              Pop Up
            </button>
          </li>
        </ul>
      </div>
    </nav>
  );
}

export default Navbar;

3. Updated PopUp Component

We'll add the close handler to the "Close" text and clean up the rendering logic:

import React from "react";

const popUpStyle = {
  position: "fixed",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  padding: "2rem",
  backgroundColor: "#fff",
  border: "1px solid #ddd",
  borderRadius: "8px",
  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
  zIndex: 1000,
};

const PopUp = ({ trigger, onClose }) => {
  if (!trigger) return null;

  return (
    <div className="popup" style={popUpStyle} id="popup">
      <h1>Pop Up</h1>
      <p>
        This is a pop up.
        <br />
        Lorem ipsum dolor sit amet consectetur adipisicing elit. A fuga eum sapiente ratione tempora veniam odio corrupti, praesentium natus optio consequatur dignissimos deserunt voluptas nihil quam amet distinctio maiores voluptatibus.
      </p>
      {/* Add click handler to close the popup */}
      <p 
        className="closepop" 
        onClick={onClose}
        style={{ cursor: "pointer", color: "#007bff", marginTop: "1rem" }}
      >
        Close
      </p>
    </div>
  );
};

export default PopUp;

How This Works #

• The App component acts as the "single source of truth" for the popup's visibility state.
• We pass functions down to child components (Navbar and PopUp) to update this state—this is React's standard way of sharing state between components.
• The Navbar's button now triggers the state change to show the popup, and the PopUp's "Close" text triggers the state change to hide it.

内容的提问来源于stack exchange，提问作者dynamitetech