React JS中hover另一课程卡片时如何自动关闭已打开的popover弹窗

你目前的实现存在两个核心问题：

• 状态隔离：isPopoverOpen状态定义在单个卡片组件内部，各卡片的弹窗状态互相独立，hover其他卡片时无法感知、修改其他卡片的状态，所以旧弹窗不会自动关闭。
• 事件逻辑不完善：仅用onMouseOver触发状态取反，没有处理鼠标在卡片和弹窗之间移动的边界场景，也没有统一的状态管控逻辑。

将弹窗的激活状态提升到所有卡片的父组件统一管理，用「当前激活的卡片ID」替代每个卡片独立的布尔状态，保证同一时间最多只有一个弹窗打开，再搭配延迟关闭逻辑避免鼠标移动时弹窗误关。

第一步：父组件统一管控状态 #

在渲染课程列表的父组件中定义全局激活状态和防抖关闭逻辑：

import { useState, useRef } from 'react';
import CourseCard from './CourseCard';

const CourseList = () => {
  // 存储当前显示弹窗的卡片ID，null表示无弹窗
  const [activeCardId, setActiveCardId] = useState(null);
  // 防抖定时器，避免鼠标从卡片移到弹窗时误关
  const closeTimer = useRef(null);

  // 延迟关闭弹窗
  const handleDelayedClose = () => {
    closeTimer.current = setTimeout(() => {
      setActiveCardId(null);
    }, 300);
  };

  // 取消关闭，鼠标移入卡片/弹窗时调用
  const cancelClose = () => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
  };

  // 你的课程数据列表，每个课程需要有唯一ID
  const courseList = [
    { id: 'course_001', name: '课程1', instructor: 'Dr. Murthy', price: 400, page: '/course/1' },
    { id: 'course_002', name: '课程2', instructor: 'Dr. Li', price: 500, page: '/course/2' },
    // 其他课程
  ];

  return (
    <div className="course-card-wrapper">
      {courseList.map(course => (
        <CourseCard
          key={course.id}
          course={course}
          activeCardId={activeCardId}
          setActiveCardId={setActiveCardId}
          handleDelayedClose={handleDelayedClose}
          cancelClose={cancelClose}
        />
      ))}
    </div>
  );
};

export default CourseList;

第二步：改造单个卡片组件 #

调整卡片的事件逻辑和弹窗打开判断逻辑：

import { Popover, ArrowContainer } from 'react-tiny-popover';
import { Link } from 'react-router-dom';

const CourseCard = ({ course, activeCardId, setActiveCardId, handleDelayedClose, cancelClose }) => {
  // 仅当前卡片ID等于激活ID时弹窗打开
  const isPopoverOpen = activeCardId === course.id;

  return (
    <Popover
      isOpen={isPopoverOpen}
      positions={['right', 'left', 'top', 'bottom']}
      padding={10}
      align="center"
      width={200}
      onClickOutside={() => setActiveCardId(null)}
      reposition="true"
      content={({ position, childRect, popoverRect }) => (
        <ArrowContainer
          position={position}
          childRect={childRect}
          popoverRect={popoverRect}
          arrowColor={'white'}
          arrowSize={10}
          arrowStyle={{ opacity: 0.7 }}
          className='popover-arrow-container'
          arrowClassName='popover-arrow'
        >
          <div
            style={{ backgroundColor: 'white', color: '#170055', padding: '10px', borderRadius: '5px', width: '300px', height: '400px', lineHeight: '1.5' }}
            // 弹窗加移入移出事件
            onMouseEnter={cancelClose}
            onMouseLeave={handleDelayedClose}
          >
            <div className="popover-text">
              <h1 style={{ fontSize: '20px' }}>{course.name}</h1>
              <h2 style={{ fontSize: '14px' }} className="course-instructor">{course.instructor}</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula rhoncus metus non condimentum.</p>
              <ol>
                <li>课程亮点1</li>
                <li>课程亮点2</li>
              </ol>
              <button className="course-button">Add to Cart</button>
            </div>
          </div>
        </ArrowContainer>
      )}
    >
      <div 
        className="tile"
        // 卡片替换原有的onMouseOver逻辑
        onMouseEnter={() => {
          cancelClose();
          setActiveCardId(course.id);
        }}
        onMouseLeave={handleDelayedClose}
      >
        <Link to={course.page}>
          <img src='../../assets/images/courses-01.jpg' alt="课程封面" />
          <div className="text">
            <h1>{course.name}</h1>
            <h2 className="course-instructor">{course.instructor}</h2>
            <p className="course-price">Rs. {course.price}</p>
          </div>
        </Link>
      </div>
    </Popover>
  );
};

export default CourseCard;

1. 全局状态管控后，hover新卡片时会直接把激活ID改成当前卡片的ID，旧卡片的弹窗自动判断为关闭状态，无需额外手动关闭旧弹窗。
2. 300ms的延迟关闭逻辑可以保证鼠标从卡片移动到弹窗的过程中弹窗不会被误关，只有完全移出卡片和弹窗区域后才会关闭。
3. 用onMouseEnter替换onMouseOver，避免鼠标在卡片内部移动时重复触发事件导致状态异常。

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