E:\source\aa2_agent12\ui\app\courses\[id]\page.tsx文件，点击【历史对话】按钮时会弹出下拉列表，现在需要增加一个功能：点击页面其他区域时隐藏这个下拉列表
修改内容总结
1. page.tsx:3
添加了useRef导入：
import React, { useState, useEffect, useRef } from 'react'2. page.tsx:247-268
添加了 ref 和 useEffect 监听点击事件：
// Ref for history dropdown const historyDropdownRef = useRef<HTMLDivElement>(null) // 点击页面其他区域时关闭历史对话下拉列表 useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( historyDropdownRef.current && !historyDropdownRef.current.contains(event.target as Node) ) { setShowHistoryDropdown(false) } } if (showHistoryDropdown) { document.addEventListener('mousedown', handleClickOutside) } return () => { document.removeEventListener('mousedown', handleClickOutside) } }, [showHistoryDropdown])3. page.tsx:1374
将 ref 绑定到下拉菜单的容器上：
<div className='relative' ref={historyDropdownRef}>工作原理
- 创建了一个
historyDropdownRef引用，绑定到包含按钮和下拉列表的容器上 - 使用
useEffect监听showHistoryDropdown的变化 - 当下拉列表显示时，添加
mousedown事件监听器 - 点击事件触发时，检查点击的目标是否在下拉容器内
- 如果点击的是外部区域，就关闭下拉列表
- 组件卸载或下拉列表关闭时，移除事件监听器
现在点击页面其他区域时，历史对话下拉列表会自动关闭！
)
