咨询：点击输入框外部时收起搜索建议下拉框的实现方案

要解决点击输入框外部仍显示建议列表的问题，你可以通过监听全局点击事件+状态控制来实现，具体步骤和修改后的代码如下：

核心思路 #

新增一个状态变量控制建议列表的显示/隐藏，结合全局点击事件判断点击区域：如果点击的是输入框或建议列表内部，保持显示；点击外部则隐藏。

修改后的完整代码 #

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

export function View() {
  const { data: nodes } = useNodes();
  const [nodeQuery, setNodeQuery] = useState('');
  const [node, setNode] = useState(null);
  // 新增状态：控制建议列表是否显示
  const [isSuggestionsVisible, setIsSuggestionsVisible] = useState(false);
  // 创建容器Ref，用于判断点击区域
  const searchContainerRef = useRef(null);

  const itemsDisplay = useMemo(() => nodes, [nodes]);

  const itemsAfterSearch = useMemo(() => {
    // 修正原filter逻辑的错误：原返回空字符串/undefined会导致过滤失效，改为返回布尔值
    return itemsDisplay.filter((node_) => {
      if (!nodeQuery) return false;
      return node_.title.includes(nodeQuery) && node_.title !== nodeQuery;
    });
  }, [itemsDisplay, nodeQuery]);

  // 监听全局点击事件
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (searchContainerRef.current && !searchContainerRef.current.contains(event.target)) {
        // 点击容器外部，隐藏建议列表
        setIsSuggestionsVisible(false);
      }
    };

    document.addEventListener('click', handleClickOutside);
    // 组件卸载时移除监听，避免内存泄漏
    return () => document.removeEventListener('click', handleClickOutside);
  }, []);

  return (
    <div ref={searchContainerRef}>
      <input
        onChange={(event) => {
          setNodeQuery(event.target.value);
          // 输入时显示建议列表
          setIsSuggestionsVisible(true);
        }}
        value={nodeQuery}
        onFocus={() => {
          // 点击输入框时，如果有匹配项则显示建议
          if (itemsAfterSearch.length) {
            setIsSuggestionsVisible(true);
          }
        }}
      />
      {/* 同时满足有匹配项+显示状态为true，才渲染建议列表 */}
      {itemsAfterSearch.length && isSuggestionsVisible ? (
        <>
          {itemsAfterSearch.map((node_) => (
            <button
              key={node_.id}
              onClick={() => {
                setNodeQuery(node_.title);
                setNode(node_);
                // 选择选项后隐藏建议列表
                setIsSuggestionsVisible(false);
              }}
            >
              <div>{node_.title}</div>
            </button>
          ))}
        </>
      ) : null}
    </div>
  );
}

关键修改点说明 #

• 新增状态isSuggestionsVisible：专门控制建议列表的显示状态，不再单纯依赖搜索结果长度。
• 容器RefsearchContainerRef：标记搜索框和建议列表的父容器，用于判断点击事件是否发生在内部。
• 全局点击事件监听：通过useEffect给document绑定点击事件，点击容器外部时隐藏建议列表，组件卸载时移除监听防止内存泄漏。
• 修正原filter逻辑：原代码返回空字符串/node会导致过滤逻辑失效，改为返回布尔值，确保只有匹配的项才会被保留。
• 输入框事件补充：输入内容时自动显示建议，点击输入框聚焦时如果有匹配项也显示建议；选择选项后立即隐藏列表。

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