React中使用原生Bootstrap 4实现点击外部切换关闭下拉菜单

Got it, I’ve been in your shoes—trying to use Bootstrap 4 dropdowns in React without leaning on jQuery or messy refs, and needing the dropdown to stay open through multiple clicks instead of closing automatically. Here’s a clean, React-native approach that fits your needs:

Core Idea #

Bootstrap 4’s dropdown visibility is controlled entirely by CSS classes (show on the dropdown container, toggle button, and menu) and the aria-expanded attribute. We can use React state to manage these instead of relying on Bootstrap’s jQuery-powered JS.

Full Component Example #

import { useState, useEffect, useRef } from 'react';

const PersistentDropdown = () => {
  // Track dropdown open/closed state
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  // Ref to the dropdown container (for detecting outside clicks)
  const dropdownContainer = useRef(null);

  // Toggle dropdown when the button is clicked
  const toggleDropdown = (e) => {
    e.preventDefault(); // Prevent any default Bootstrap JS behavior (if loaded)
    setIsDropdownOpen(prevState => !prevState);
  };

  // Close dropdown when clicking outside the container
  useEffect(() => {
    const handleOutsideClick = (event) => {
      if (dropdownContainer.current && !dropdownContainer.current.contains(event.target)) {
        setIsDropdownOpen(false);
      }
    };

    // Attach event listener when component mounts
    document.addEventListener('mousedown', handleOutsideClick);
    // Clean up listener when component unmounts
    return () => document.removeEventListener('mousedown', handleOutsideClick);
  }, []);

  return (
    <div 
      ref={dropdownContainer}
      className={`dropdown ${isDropdownOpen ? 'show' : ''}`}
    >
      <button
        className={`btn btn-primary dropdown-toggle ${isDropdownOpen ? 'show' : ''}`}
        type="button"
        onClick={toggleDropdown}
        aria-expanded={isDropdownOpen}
      >
        Click Me (Stays Open On Item Clicks!)
      </button>
      <div className={`dropdown-menu ${isDropdownOpen ? 'show' : ''}`}>
        {/* These items won't close the dropdown when clicked */}
        <button className="dropdown-item" onClick={() => console.log('Item 1 selected')}>
          Item 1
        </button>
        <button className="dropdown-item" onClick={() => console.log('Item 2 selected')}>
          Item 2
        </button>
        {/* Optional: Add an item that DOES close the dropdown */}
        <button 
          className="dropdown-item" 
          onClick={() => {
            console.log('Close dropdown after this click');
            setIsDropdownOpen(false);
          }}
        >
          Item 3 (Closes Dropdown)
        </button>
      </div>
    </div>
  );
};

export default PersistentDropdown;

Key Details #

• State-Driven Classes: We conditionally apply the show class to the dropdown container, toggle button, and menu based on isDropdownOpen—this is exactly how Bootstrap’s JS controls visibility, but we’re doing it React-style.
• Outside Click Handling: The useRef and useEffect combo lets us detect clicks outside the dropdown and close it, replicating Bootstrap’s default behavior without jQuery.
• Persistent Open State: By default, clicking dropdown items won’t close the menu (since we don’t trigger setIsDropdownOpen(false) in their handlers). If you want specific items to close the menu, just add that state update to their click events (like Item 3 in the example).
• No jQuery Dependencies: You don’t need to load Bootstrap’s dropdown.js at all—this component works purely with Bootstrap’s CSS and React’s state management.

Bonus Tips #

• Make sure you’re importing Bootstrap 4’s CSS in your project (either via CDN or npm import) so the dropdown styles work correctly.
• If you do have Bootstrap’s JS loaded elsewhere, the e.preventDefault() in toggleDropdown will prevent conflicts with its default dropdown logic.

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