ReactJS中悬浮元素时切换另一元素显示状态的方案求助

Hey there! Let's get your header panel behavior working exactly as you want. We'll use React state to manage which panel is visible, handle hover states properly so the Drive panel stays open while you're on it, and ensure only one panel shows at a time. Here's the updated code with explanations:

import React, { Component } from 'react';
import './App.css';

class Header extends Component {
  // Initialize state to track active panel and Drive panel hover status
  state = {
    activePanel: null, // Can be 'drive', 'ride', or null
    isMouseOverDrivePanel: false
  };

  handleDriveMouseEnter = () => {
    // Show Drive panel when hovering the Drive link
    this.setState({ activePanel: 'drive' });
  };

  handleDriveMouseLeave = () => {
    // Add a small delay to let the mouse move to the Drive panel before hiding it
    setTimeout(() => {
      if (!this.state.isMouseOverDrivePanel) {
        this.setState({ activePanel: null });
      }
    }, 150);
  };

  handleDrivePanelMouseEnter = () => {
    // Mark that the mouse is over the Drive panel
    this.setState({ isMouseOverDrivePanel: true });
  };

  handleDrivePanelMouseLeave = () => {
    // Hide Drive panel when mouse leaves the panel
    this.setState({
      isMouseOverDrivePanel: false,
      activePanel: null
    });
  };

  handleRideClick = (e) => {
    // Prevent default link behavior (since href is "*")
    e.preventDefault();
    // Show Ride panel, and reset Drive state to avoid conflicts
    this.setState({
      activePanel: 'ride',
      isMouseOverDrivePanel: false
    });
  };

  render() {
    const { activePanel } = this.state;

    return (
      <div className="Nav">
        <header className="Nav-header">
          <h1 className="Nav-title">Halcon</h1>
          <p className="Nav-drive">
            <a 
              href="*" 
              className="Nav-link" 
              onMouseEnter={this.handleDriveMouseEnter}
              onMouseLeave={this.handleDriveMouseLeave}
            >
              Drive
            </a>
          </p>
          <p className="Nav-seperator">|</p>
          <p className="Nav-ride">
            <a 
              href="*" 
              className="Nav-link"
              onClick={this.handleRideClick}
            >
              Ride
            </a>
          </p>
        </header>

        {/* Drive panel - only show if activePanel is 'drive' */}
        {activePanel === 'drive' && (
          <div 
            className="Drive-toggle"
            onMouseEnter={this.handleDrivePanelMouseEnter}
            onMouseLeave={this.handleDrivePanelMouseLeave}
          >
            <h3>Why drive with us?</h3>
            <h3>Safety</h3>
            <h3>Requirements to Drive</h3>
            <h3>Driver App</h3>
            <h3>Driver - Log In</h3>
          </div>
        )}

        {/* Ride panel - only show if activePanel is 'ride' */}
        {activePanel === 'ride' && (
          <div className="Ride-toggle">
            <h3>Why ride with us?</h3>
            <h3>Safety</h3>
            <h3>How to Ride</h3>
            <h3>Rider App</h3>
            <h3>Rider - Log In</h3>
          </div>
        )}
      </div>
    );
  }
}

export default Header;

Key Details Explained: #

• State Management: We use activePanel to track which panel should be visible, and isMouseOverDrivePanel to keep the Drive panel open while the mouse is on it.
• Drive Hover Behavior:
  • When you hover the "Drive" link, we immediately show the Drive panel.
  • When you move the mouse away from the link, we add a short delay before hiding the panel—this gives you time to move the mouse onto the panel itself.
  • If the mouse enters the Drive panel, we update isMouseOverDrivePanel to true, so the delay check won't hide the panel. When you leave the panel, we hide it right away.
• Ride Click Behavior: Clicking "Ride" sets activePanel to 'ride' (which hides the Drive panel if it was open) and prevents the default link action.
• Single Panel Rule: Since we only render one panel at a time based on activePanel, you'll never see both Drive and Ride panels open together.

Also, I updated the Ride panel's content to match the "Ride" context (changed "Why drive with us?" to "Why ride with us?" etc.)—feel free to adjust that back if you need!

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