如何在React.js中实现点击按钮及外部区域的页面显隐控制（无第三方库依赖）

Hey there! Since you're new to React and struggling with getting a component to show/hide when clicking a button or clicking outside the target area, let me walk you through a complete, dependency-free solution that you can adapt to your existing code.

Core Logic Breakdown #

We'll use React's built-in hooks to:

• Manage the show/hide state with useState
• Track the target component with useRef to detect outside clicks
• Add/remove global click listeners with useEffect to avoid memory leaks

Full Code Example #

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

function ToggleContent() {
  // Initialize visibility state to hidden
  const [isContentVisible, setIsContentVisible] = useState(false);
  // Ref to reference our target content container
  const contentRef = useRef(null);

  // Button click handler to toggle visibility
  const handleToggleClick = () => {
    setIsContentVisible(prevState => !prevState);
  };

  // Global click handler to detect clicks outside the content
  const handleOutsideClick = (event) => {
    // If the content is visible and the click is outside it, hide the content
    if (contentRef.current && !contentRef.current.contains(event.target)) {
      setIsContentVisible(false);
    }
  };

  // Add global click listener when component mounts, remove when unmounted
  useEffect(() => {
    document.addEventListener('click', handleOutsideClick);
    // Cleanup function to remove listener
    return () => {
      document.removeEventListener('click', handleOutsideClick);
    };
  }, []);

  return (
    <div className="toggle-container">
      {/* Toggle Button */}
      <button onClick={handleToggleClick}>
        {isContentVisible ? 'Hide Content' : 'Show Content'}
      </button>

      {/* Conditionally Rendered Content */}
      {isContentVisible && (
        <div 
          ref={contentRef}
          style={{
            marginTop: '1rem',
            padding: '1.5rem',
            border: '1px solid #ddd',
            borderRadius: '4px',
            width: '300px'
          }}
        >
          This is the content that toggles!<br />
          Click outside this box or the button to hide me.
        </div>
      )}
    </div>
  );
}

export default ToggleContent;

Key Details to Note #

• State Management: useState keeps track of whether the content is visible. The button click simply flips this state.
• Outside Click Detection:
  • useRef gives us direct access to the content DOM element, so we can check if the click happened inside it using the contains() method.
  • The useEffect hook ensures we only add the global click listener once when the component mounts, and clean it up when the component unmounts to prevent memory leaks.
• Handling Nested Elements: If your toggle button is inside the content container, add event.stopPropagation() to the button's click handler to prevent the outside click logic from immediately hiding the content after you show it.

Adapting to Your Existing Code #

• If you're using a class component instead of functional components, the logic translates directly:
  • Use this.state instead of useState
  • Use this.refs or createRef() instead of useRef
  • Add the event listener in componentDidMount and remove it in componentWillUnmount
• Double-check that your content container has the ref attached correctly—this is crucial for the outside click detection to work.

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