新北市网站建设_网站建设公司_AJAX_seo优化

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}>

工作原理

1. 创建了一个historyDropdownRef引用，绑定到包含按钮和下拉列表的容器上
2. 使用useEffect监听showHistoryDropdown的变化
3. 当下拉列表显示时，添加mousedown事件监听器
4. 点击事件触发时，检查点击的目标是否在下拉容器内
5. 如果点击的是外部区域，就关闭下拉列表
6. 组件卸载或下拉列表关闭时，移除事件监听器

现在点击页面其他区域时，历史对话下拉列表会自动关闭！