React中选项框未选中即隐藏，无法聚焦选择问题求助

针对你遇到的点击选项时下拉框提前隐藏的问题，这里提供几种可行的实现方案：

方案一：利用focusin/focusout的冒泡特性与relatedTarget判断 #

focusin和focusout是支持冒泡的焦点事件，结合relatedTarget可以判断失焦后焦点是否仍在容器内部，避免误隐藏下拉框。

import { useRef, useState } from "react";

export default function App() {
  const [showOptions, setShowOptions] = useState(false);
  const containerRef = useRef(null);

  const handleFocusIn = () => {
    setShowOptions(true);
  };

  const handleFocusOut = (e) => {
    // 仅当焦点转移到容器外部时，才隐藏选项
    if (!containerRef.current.contains(e.relatedTarget)) {
      setShowOptions(false);
    }
  };

  const handleOptionSelect = (value) => {
    console.log("选中:", value);
    setShowOptions(false);
  };

  return (
    <div
      ref={containerRef}
      style={{ position: "relative", width: 200 }}
      onFocusIn={handleFocusIn}
      onFocusOut={handleFocusOut}
      tabIndex={0} // 让容器可被聚焦
    >
      <input 
        style={{ width: "100%", padding: 8 }} 
        placeholder="点击展开选项" 
      />
      {showOptions && (
        <div
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            right: 0,
            border: "1px solid #ccc",
            background: "white"
          }}
        >
          <div
            style={{ padding: 8, cursor: "pointer" }}
            onClick={() => handleOptionSelect("选项1")}
            tabIndex={0} // 让选项可被聚焦
          >
            选项1
          </div>
          <div
            style={{ padding: 8, cursor: "pointer" }}
            onClick={() => handleOptionSelect("选项2")}
            tabIndex={0}
          >
            选项2
          </div>
        </div>
      )}
    </div>
  );
}

核心逻辑：

• 给父容器设置tabIndex={0}使其能接收焦点
• focusin触发时显示选项，focusout时检查relatedTarget是否属于容器内部，只有点击外部才隐藏

方案二：监听文档点击事件判断点击区域 #

通过监听全局点击事件，判断点击目标是否在容器范围内，仅点击外部时隐藏下拉框。

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

export default function App() {
  const [showOptions, setShowOptions] = useState(false);
  const containerRef = useRef(null);

  useEffect(() => {
    if (!showOptions) return;

    const handleClickOutside = (e) => {
      if (!containerRef.current.contains(e.target)) {
        setShowOptions(false);
      }
    };
    // 监听文档点击事件
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [showOptions]);

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

  const handleOptionSelect = (value) => {
    console.log("选中:", value);
    setShowOptions(false);
  };

  return (
    <div
      ref={containerRef}
      style={{ position: "relative", width: 200 }}
    >
      <input 
        style={{ width: "100%", padding: 8 }} 
        placeholder="点击展开选项" 
        onFocus={handleInputFocus}
      />
      {showOptions && (
        <div
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            right: 0,
            border: "1px solid #ccc",
            background: "white"
          }}
        >
          <div
            style={{ padding: 8, cursor: "pointer" }}
            onClick={() => handleOptionSelect("选项1")}
          >
            选项1
          </div>
          <div
            style={{ padding: 8, cursor: "pointer" }}
            onClick={() => handleOptionSelect("选项2")}
          >
            选项2
          </div>
        </div>
      )}
    </div>
  );
}

核心逻辑：

• 当选项展开时，给文档绑定mousedown事件
• 点击事件触发时，判断目标元素是否在容器内，不在则隐藏选项
• 组件卸载或选项隐藏时，移除事件监听避免内存泄漏

方案三：延迟失焦判断 #

通过设置短暂延迟，让选项的点击事件先触发，再决定是否隐藏下拉框。

import { useRef, useState } from "react";

export default function App() {
  const [showOptions, setShowOptions] = useState(false);
  const containerRef = useRef(null);
  let blurTimer;

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

  const handleContainerBlur = () => {
    // 设置延迟，等待点击事件执行
    blurTimer = setTimeout(() => setShowOptions(false), 150);
  };

  const handleOptionSelect = (value) => {
    console.log("选中:", value);
    clearTimeout(blurTimer); // 清除延迟，避免误隐藏
    setShowOptions(false);
  };

  const handleOptionMouseDown = () => {
    clearTimeout(blurTimer); // 鼠标按下时立即清除延迟
  };

  return (
    <div
      ref={containerRef}
      style={{ position: "relative", width: 200 }}
      onBlur={handleContainerBlur}
      tabIndex={0}
    >
      <input 
        style={{ width: "100%", padding: 8 }} 
        placeholder="点击展开选项" 
        onFocus={handleInputFocus}
      />
      {showOptions && (
        <div
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            right: 0,
            border: "1px solid #ccc",
            background: "white"
          }}
        >
          <div
            style={{ padding: 8, cursor: "pointer" }}
            onClick={() => handleOptionSelect("选项1")}
            onMouseDown={handleOptionMouseDown}
          >
            选项1
          </div>
          <div
            style={{ padding: 8, cursor: "pointer" }}
            onClick={() => handleOptionSelect("选项2")}
            onMouseDown={handleOptionMouseDown}
          >
            选项2
          </div>
        </div>
      )}
    </div>
  );
}

核心逻辑：

• 容器失焦时设置定时器延迟隐藏选项
• 点击选项时，先通过mousedown清除定时器，确保点击事件能正常执行
• 选中选项后手动隐藏下拉框

内容的提问来源于stack exchange，提问作者João Ramiro