技术求助：如何将头部按钮的Hover触发改为Click触发？

Hey there! Let's switch that header dropdown from hover-triggered to click-triggered. I'll walk you through modifying your React code step by step, based on the snippet you shared.

Step 1: Add state to track menu visibility #

First, you'll need a state variable to control whether the dropdown is open or closed. In your class component, add this to your constructor:

constructor(props) {
  super(props);
  this.state = {
    isMenuOpen: false
  };
  // Bind methods to ensure correct `this` context
  this.toggleMenu = this.toggleMenu.bind(this);
  this.handleClickOutside = this.handleClickOutside.bind(this);
}

Step 2: Create the toggle function #

Add a method to flip the menu state when the button is clicked:

toggleMenu() {
  this.setState(prevState => ({
    isMenuOpen: !prevState.isMenuOpen
  }));
}

Step 3: Update your JSX to use click events and state #

Modify your header user section to trigger the toggle on click, and conditionally render the dropdown based on the state:

{ this.props.isAuthenticated === true ? (
  <div 
    className="header-user" 
    onClick={this.toggleMenu}
    ref={el => this.headerUserRef = el} {/* For click-outside handling */}
  >
    <Link to={`/users/edit/${userName}`} className="header-user-btn">
      <p className="setting-btn">設定</p>
    </Link>
    {/* Only show dropdown when isMenuOpen is true */}
    {this.state.isMenuOpen && (
      <div className="header-user-dropMenu">
        <ul className="header-user-dropMenu-list">
          <li className="header-user...">
            {/* Your existing dropdown items go here */}
          </li>
        </ul>
      </div>
    )}
  </div>
) : null }

Step 4: Adjust your CSS (important!) #

You'll need to remove any existing hover-based styles for the dropdown. For example, if you had something like:

.header-user:hover .header-user-dropMenu {
  display: block;
}

Replace that with a class-based style to match the state:

.header-user-dropMenu {
  display: none; /* Hide by default */
}

.header-user-dropMenu.active {
  display: block; /* Show when active */
}

If you use this approach, update the dropdown's className to include the active class based on state:

<div className={`header-user-dropMenu ${this.state.isMenuOpen ? 'active' : ''}`}>

Step 5: Optional (but recommended): Close menu when clicking outside #

Add these lifecycle methods and handler to close the dropdown when the user clicks anywhere else on the page:

componentDidMount() {
  document.addEventListener('mousedown', this.handleClickOutside);
}

componentWillUnmount() {
  document.removeEventListener('mousedown', this.handleClickOutside);
}

handleClickOutside(event) {
  // Check if the click is outside the header user container
  if (this.headerUserRef && !this.headerUserRef.contains(event.target)) {
    this.setState({ isMenuOpen: false });
  }
}

That should do it! Now your dropdown will toggle open/closed when the user clicks the header button instead of hovering over it.

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