React点击外部关闭下拉菜单问题排查及代码求助

问题概述 #

1. 点击下拉菜单外部无法关闭菜单，调试后仍未解决
2. 需对代码关键逻辑添加注释，同时困惑于视频中代码工具栏的功能
3. 已查阅spread操作符与useRef资料，但不清楚代码中使用spread操作符的原因

相关代码（带注释） #

import { useEffect, useRef, useState } from 'react';
import './stateDropdown.css';
import { states } from './States';

export function StateDropdown() {
  // 控制下拉菜单显示/隐藏的状态变量
  const [isDropDownDisplayed, setIsDropdowndisplayed] = useState(false);
  // 存储每个州的选中状态，类型为{州缩写: 是否选中}的对象
  const [selectedStates, setSelectedStates] = useState<Record<string, boolean>>(
    // 用reduce遍历states数组，初始化所有州为未选中状态
    states.reduce((obj, state) => ({ ...obj, [state.abbreviation]: false }), {})
  );
  // 计算已选中的州数量
  const numberOfStatesSelected = Object.values(selectedStates).filter(Boolean).length;
  // 获取下拉菜单DOM元素的引用，用于判断点击区域
  const dropDownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 文档点击事件的处理函数
    const onClick = (e: MouseEvent) => {
      // 检查下拉菜单存在，且点击目标不在菜单内部
      if (dropDownRef.current && !dropDownRef.current.contains(e.target as Node)) {
        setIsDropdowndisplayed(false);
      }
    };
    // 绑定文档点击事件（原代码错误绑定了空函数，导致逻辑失效）
    document.addEventListener('click', onClick);
    // 组件卸载时移除事件监听，避免内存泄漏
    return () => {
      document.removeEventListener('click', onClick);
    };
  }, []);

  return (
    <fieldset className="state-dropdown">
      {/* 下拉菜单触发按钮 */}
      <button
        onClick={(e) => {
          // 阻止事件冒泡，避免触发文档点击事件导致菜单刚打开就关闭
          e.stopPropagation();
          // 切换下拉菜单的显示状态
          setIsDropdowndisplayed((prevState) => !prevState);
        }}
      >
        {/* 根据选中数量显示不同文本 */}
        {numberOfStatesSelected > 0
          ? `${numberOfStatesSelected} states selected`
          : '-- Select your states --'}

        {/* 下拉箭头SVG图标 */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          className="w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5"
          />
        </svg>
      </button>
      {/* 下拉菜单面板，仅在isDropDownDisplayed为true时渲染 */}
      {isDropDownDisplayed && (
        <div
          onClick={(e) => {
            // 阻止事件冒泡，点击菜单内部时不关闭菜单
            e.stopPropagation();
          }}
          ref={dropDownRef}
          className="panel"
        >
          {/* 遍历所有州，生成复选框选项 */}
          {states.map((state) => (
            <fieldset
              key={state.abbreviation}
              // 选中时添加selected类
              className={selectedStates[state.abbreviation] ? 'selected' : ''}
            >
              <input
                onChange={(e) =>
                  setSelectedStates({
                    // 复制原有选中状态对象，避免直接修改原状态
                    ...selectedStates,
                    // 更新当前州的选中状态
                    [state.abbreviation]: e.target.checked,
                  })
                }
                // 绑定当前州的选中状态
                checked={selectedStates[state.abbreviation]}
                id={`input-${state.abbreviation}`}
                type="checkbox"
              />
              <label htmlFor={`input-${state.abbreviation}`}>
                {state.name}
              </label>
            </fieldset>
          ))}
        </div>
      )}
    </fieldset>
  );
}

问题解决与疑问解答 #

1. 点击外部无法关闭菜单的修复 #

原代码useEffect中错误地给document.addEventListener传入了空函数() => {}，导致点击事件未绑定正确逻辑。同时原判断条件e.target !== dropDownRef.current存在缺陷——点击菜单内的子元素（如复选框、标签）时，e.target是子元素而非容器本身，会误判为外部点击。修改为dropDownRef.current && !dropDownRef.current.contains(e.target as Node)，可准确判断点击目标是否在菜单内部。

2. 代码工具栏功能说明 #

视频中的代码工具栏通常包含代码格式化、断点调试、变量监视、代码跳转、终端调用等功能，不同编辑器的工具栏功能略有差异，可查看对应编辑器的官方文档了解细节。

3. spread操作符的作用 #

React中状态不可直接修改，直接修改selectedStates对象不会触发组件重新渲染。spread操作符(...selectedStates)用于创建原有状态对象的浅拷贝，在新对象上修改指定州的选中状态后，再通过setSelectedStates更新状态，这样React才能检测到状态变化并触发组件重新渲染。

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