React中如何监听下拉菜单的展开与关闭状态？

原生<select>标签并没有提供专门的open或close事件，直接用onFocus和onBlur确实无法准确判断下拉的展开/关闭状态——比如点击下拉选项时，select不会触发blur，导致无法感知关闭动作。下面是几种可行的模拟方案：

方案一：结合点击事件、焦点状态与全局点击监听 #

通过记录select的聚焦状态，结合点击事件切换展开状态，同时监听全局点击处理外部关闭的情况：

import { useState, useRef, useEffect } from 'react';

function CustomSelect({ options }) {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const selectRef = useRef(null);
  const hasFocus = useRef(false);

  // 处理select点击事件
  const handleSelectClick = () => {
    if (hasFocus.current) {
      // 已聚焦时点击，视为切换下拉状态
      setIsDropdownOpen(prev => !prev);
    } else {
      // 首次点击，标记为展开
      setIsDropdownOpen(true);
    }
  };

  // 记录聚焦状态
  const handleSelectFocus = () => {
    hasFocus.current = true;
  };

  // 失去焦点时关闭下拉
  const handleSelectBlur = () => {
    hasFocus.current = false;
    setIsDropdownOpen(false);
  };

  // 监听全局点击，处理外部关闭
  useEffect(() => {
    const handleOutsideClick = (e) => {
      if (selectRef.current && !selectRef.current.contains(e.target)) {
        setIsDropdownOpen(false);
        hasFocus.current = false;
      }
    };

    document.addEventListener('click', handleOutsideClick);
    return () => document.removeEventListener('click', handleOutsideClick);
  }, []);

  return (
    <div className="select-container">
      <select
        ref={selectRef}
        onClick={handleSelectClick}
        onFocus={handleSelectFocus}
        onBlur={handleSelectBlur}
      >
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {/* 测试用：展示当前状态 */}
      {isDropdownOpen && <span>下拉已展开</span>}
    </div>
  );
}

方案二：结合鼠标按下事件与键盘事件 #

针对鼠标点击和键盘操作（空格/回车展开）分别处理，同时用blur事件处理失去焦点的情况：

import { useState, useRef, useEffect } from 'react';

function CustomSelect({ options }) {
  const [isOpen, setIsOpen] = useState(false);
  const selectRef = useRef(null);

  // 鼠标按下时切换状态（mousedown在focus前触发）
  const handleMousedown = () => {
    setIsOpen(prev => !prev);
  };

  // 键盘操作展开/关闭
  const handleKeyDown = (e) => {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault();
      setIsOpen(prev => !prev);
    }
  };

  // 失去焦点时关闭
  const handleBlur = () => {
    setIsOpen(false);
  };

  // 外部点击关闭
  useEffect(() => {
    const handleOutsideClick = (e) => {
      if (selectRef.current && !selectRef.current.contains(e.target)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('click', handleOutsideClick);
    return () => document.removeEventListener('click', handleOutsideClick);
  }, []);

  return (
    <div className="select-container">
      <select
        ref={selectRef}
        onMousedown={handleMousedown}
        onKeyDown={handleKeyDown}
        onBlur={handleBlur}
      >
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      {isOpen && <span>下拉菜单已打开</span>}
    </div>
  );
}

注意事项 #

• 原生下拉菜单是浏览器渲染的原生控件，无法直接监听其内部的展开/关闭动作，上述方案都是通过用户交互行为间接模拟状态。
• 如果需要更精准的控制或自定义样式，建议使用成熟的UI组件库的Select组件，它们通常内置了openChange这类专门的事件。

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