React搜索结果栏优化：空值隐藏与点击外部关闭需求

一、实现搜索框为空/无结果时隐藏结果栏 #

当前search-list容器始终渲染，需添加条件渲染，仅当搜索框有内容且存在有效搜索结果时才显示：

修改Navbar.js中的结果栏部分：

// 替换原有的search-list div
{props.searchValue.trim() !== "" && props.movieSearch.length > 0 && (
  <div className="container-fluid search-list">
    <SearchList
      tvShow={props.movieSearch}
      handleFavouritesClick={props.addRecentlyViewed}
    />
    <Link to="/search">
      <button className="results">
        <h7 className="results-text">See all results for "{props.searchValue}"</h7>
      </button>
    </Link>
  </div>
)}

同时补充搜索框清空时的结果重置逻辑，在Navbar.js的useEffect中修改：

useEffect(() => {
  if (props.searchValue) {
    getSearchRequest();
  } else {
    // 清空搜索结果数组
    props.setMovieSearch([]);
  }
}, [props.searchValue]);

二、实现点击页面其他区域关闭结果栏 #

通过监听全局点击事件，判断点击目标是否属于搜索相关区域，若不属于则清空搜索框内容（触发结果栏隐藏）：

在Navbar.js中添加ref和事件监听逻辑：

const Navbar = (props) => {
  // 创建ref标记搜索相关区域
  const searchContainerRef = React.useRef(null);

  // 全局点击事件处理
  React.useEffect(() => {
    const handleClickOutside = (e) => {
      if (searchContainerRef.current && !searchContainerRef.current.contains(e.target)) {
        // 点击外部区域，清空搜索框
        props.setSearchValue("");
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    // 组件卸载时移除监听
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [props.setSearchValue]);

  // ... 原有代码保持不变

  return (
    <div>
      <nav className="navbar">
        {/* 将搜索框包裹在ref容器下 */}
        <div ref={searchContainerRef} className="nav-center d-flex">
          <Link to="/">
            <img className="logo" src={logo} alt="logo" />
          </Link>
          <SearchBox
            searchValue={props.searchValue}
            setSearchValue={props.setSearchValue}
          />
        </div>
      </nav>
      {/* 条件渲染的结果栏 */}
      {props.searchValue.trim() !== "" && props.movieSearch.length > 0 && (
        <div className="container-fluid search-list">
          <SearchList
            tvShow={props.movieSearch}
            handleFavouritesClick={props.addRecentlyViewed}
          />
          <Link to="/search">
            <button className="results">
              <h7 className="results-text">See all results for "{props.searchValue}"</h7>
            </button>
          </Link>
        </div>
      )}
    </div>
  );
};

注：将搜索框和结果栏关联到同一个ref容器，确保点击搜索框或结果栏内部时不会触发关闭逻辑；同时移除了原按钮中无效的onClick={closeFunction()}代码。

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