React中点击menu时如何维持menu显示？input field失焦问题求助

哈哈，这个坑我刚踩过没多久！你遇到的问题本质是浏览器事件触发顺序在搞鬼：当你点击菜单的时候，浏览器会先触发 input 的 blur 事件（这时候你的菜单就被隐藏了），之后才会触发菜单的 click 事件——但这时候菜单已经不在DOM里了，自然没法触发后续的保留逻辑。

下面给你几个靠谱的解决方案，按优雅程度排序：

方案一：利用relatedTarget判断焦点是否在菜单内（最推荐） #

这个方法直接利用blur事件的relatedTarget属性，判断失焦后焦点是否转移到了菜单内部，如果是就不隐藏菜单。

import { useState, useRef } from 'react';

function InputWithMenu() {
  const [isMenuVisible, setIsMenuVisible] = useState(false);
  const menuRef = useRef(null);

  const handleInputFocus = () => {
    setIsMenuVisible(true);
  };

  const handleInputBlur = (e) => {
    // 检查失焦后，焦点是否落在菜单元素内部
    if (!menuRef.current?.contains(e.relatedTarget)) {
      setIsMenuVisible(false);
    }
  };

  const handleMenuClick = (e) => {
    console.log('选中了:', e.target.textContent);
    // 如果点击后需要保持菜单可见，这里什么都不用做；如果要隐藏，就调用setIsMenuVisible(false)
  };

  return (
    <div style={{ position: 'relative', width: '200px' }}>
      <input
        type="text"
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
        placeholder="点击显示菜单"
        style={{ width: '100%', padding: '8px' }}
      />
      {isMenuVisible && (
        <div 
          ref={menuRef} 
          style={{ 
            position: 'absolute', 
            top: '40px', 
            left: 0, 
            right: 0,
            border: '1px solid #eee', 
            borderRadius: '4px',
            padding: '8px',
            backgroundColor: 'white',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
          }}
          onClick={handleMenuClick}
        >
          <div style={{ padding: '4px 0', cursor: 'pointer' }}>菜单选项1</div>
          <div style={{ padding: '4px 0', cursor: 'pointer' }}>菜单选项2</div>
          <div style={{ padding: '4px 0', cursor: 'pointer' }}>菜单选项3</div>
        </div>
      )}
    </div>
  );
}

export default InputWithMenu;

优点：无延迟，逻辑清晰，完全符合浏览器事件机制；
注意点：极少数场景下relatedTarget可能为null（比如点击页面空白处），但这种情况本来就应该隐藏菜单，不影响核心逻辑。

方案二：用mousedown提前标记菜单点击 #

mousedown事件会在blur事件之前触发，所以我们可以在用户按下鼠标的时候就标记“点击了菜单”，这样blur事件触发时就不会隐藏菜单。

import { useState, useRef } from 'react';

function InputWithMenu() {
  const [isMenuVisible, setIsMenuVisible] = useState(false);
  const [isMenuClicked, setIsMenuClicked] = useState(false);

  const handleInputFocus = () => {
    setIsMenuVisible(true);
  };

  const handleInputBlur = () => {
    if (!isMenuClicked) {
      setIsMenuVisible(false);
    }
    // 重置标记，避免影响后续操作
    setIsMenuClicked(false);
  };

  const handleMenuMouseDown = () => {
    setIsMenuClicked(true);
  };

  const handleMenuClick = (e) => {
    console.log('选中了:', e.target.textContent);
  };

  return (
    <div style={{ position: 'relative', width: '200px' }}>
      <input
        type="text"
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
        placeholder="点击显示菜单"
        style={{ width: '100%', padding: '8px' }}
      />
      {isMenuVisible && (
        <div 
          style={{ 
            position: 'absolute', 
            top: '40px', 
            left: 0, 
            right: 0,
            border: '1px solid #eee', 
            borderRadius: '4px',
            padding: '8px',
            backgroundColor: 'white',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
          }}
          onMouseDown={handleMenuMouseDown}
          onClick={handleMenuClick}
        >
          <div style={{ padding: '4px 0', cursor: 'pointer' }}>菜单选项1</div>
          <div style={{ padding: '4px 0', cursor: 'pointer' }}>菜单选项2</div>
          <div style={{ padding: '4px 0', cursor: 'pointer' }}>菜单选项3</div>
        </div>
      )}
    </div>
  );
}

export default InputWithMenu;

优点：兼容性好，不会有延迟；
注意点：如果需要支持键盘操作菜单（比如上下箭头选择），需要额外处理键盘事件的焦点转移。

方案三：延迟执行blur的隐藏逻辑 #

给blur事件的隐藏操作加一个微小的延迟，让click事件先触发，这样就能在隐藏前判断是否点击了菜单。

import { useState, useRef } from 'react';

function InputWithMenu() {
  const [isMenuVisible, setIsMenuVisible] = useState(false);
  const [clickedMenu, setClickedMenu] = useState(false);

  const handleInputFocus = () => {
    setIsMenuVisible(true);
  };

  const handleInputBlur = () => {
    // 延迟100ms，让click事件先完成
    setTimeout(() => {
      if (!clickedMenu) {
        setIsMenuVisible(false);
      }
      setClickedMenu(false);
    }, 100);
  };

  const handleMenuClick = (e) => {
    setClickedMenu(true);
    console.log('选中了:', e.target.textContent);
  };

  return (
    <div style={{ position: 'relative', width: '200px' }}>
      <input
        type="text"
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
        placeholder="点击显示菜单"
        style={{ width: '100%', padding: '8px' }}
      />
      {isMenuVisible && (
        <div 
          style={{ 
            position: 'absolute', 
            top: '40px', 
            left: 0, 
            right: 0,
            border: '1px solid #eee', 
            borderRadius: '4px',
            padding: '8px',
            backgroundColor: 'white',
            boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
          }}
          onClick={handleMenuClick}
        >
          <div style={{ padding: '4px 0', cursor: 'pointer' }}>菜单选项1</div>
          <div style={{ padding: '4px 0', cursor: 'pointer' }}>菜单选项2</div>
          <div style={{ padding: '4px 0', cursor: 'pointer' }}>菜单选项3</div>
        </div>
      )}
    </div>
  );
}

export default InputWithMenu;

优点：逻辑简单，容易理解；
注意点：会有100ms的微小延迟，极端情况下可能出现菜单闪一下的情况。

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