ReactJS：为单个元素添加鼠标悬停（Hover）事件类名

嘿，我懂你碰到的这个问题啦！你现在的问题根源很明确：你把isHovered这个状态放在了父组件里，所有的子div都共享同一个状态值。所以只要有一个元素触发了hover事件，这个全局的状态就会切换，导致所有div都加上active类，自然就一起展开了。

为什么会这样？ #

你当前的代码里，整个组件只有一个isHovered布尔值状态，所有子div的active类都依赖这个值。不管哪个div触发了handleMenuHover，都会把这个全局状态翻转，所有div的类都会跟着变，这就造成了“一hover全展开”的情况。

两种解决方案 #

方案1：给每个子div单独维护状态（推荐） #

把每个可hover的div拆成独立的子组件，让每个子组件自己管理自己的isHovered状态。这样每个元素的状态都是独立的，hover一个不会影响其他。

示例代码：

// 单独的菜单子组件
class MenuItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isHovered: false };
    // 绑定事件处理函数
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }

  handleMouseEnter() {
    this.setState({ isHovered: true });
  }

  handleMouseLeave() {
    this.setState({ isHovered: false });
  }

  render() {
    const menuActive = this.state.isHovered ? "active" : "";
    return (
      <div 
        className={`menu-item ${menuActive}`}
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
      >
        {this.props.children}
      </div>
    );
  }
}

// 父组件中使用
class MenuContainer extends React.Component {
  render() {
    return (
      <div className="menu-wrapper">
        <MenuItem>我的账户</MenuItem>
        <MenuItem>订单管理</MenuItem>
        <MenuItem>设置</MenuItem>
      </div>
    );
  }
}

方案2：在父组件中跟踪当前hover的元素索引 #

如果不想拆分子组件，可以在父组件里用状态存储当前被hover的元素索引（或者唯一ID），而不是用单一的布尔值。这样就能精准定位到哪个元素需要激活active类。

示例代码：

class MenuContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hoverIndex: null }; // 初始为null，表示没有元素被hover
  }

  // 传入当前元素的索引，设置hover状态
  handleHoverStart = (index) => {
    this.setState({ hoverIndex: index });
  }

  // 清除hover状态
  handleHoverEnd = () => {
    this.setState({ hoverIndex: null });
  }

  render() {
    // 假设有一组菜单数据
    const menuList = ["首页", "分类", "购物车", "我的"];
    
    return (
      <div className="menu-container">
        {menuList.map((item, index) => (
          <div
            key={index}
            className={`menu-item ${this.state.hoverIndex === index ? "active" : ""}`}
            onMouseEnter={() => this.handleHoverStart(index)}
            onMouseLeave={this.handleHoverEnd}
          >
            {item}
          </div>
        ))}
      </div>
    );
  }
}

小提示 #

• 用onMouseEnter和onMouseLeave比onMouseOver/onMouseOut更合适，因为前者不会因为子元素冒泡而触发不必要的状态切换。
• 如果你的菜单数据有唯一ID，优先用ID代替索引来跟踪hover状态，避免列表排序变化导致的索引混乱。

内容的提问来源于stack exchange，提问作者Mark Gerryl Mirandilla