React自定义Dropdown点击冲突：useState控制列表显示异常

问题根源 #

你遇到的问题是事件冒泡导致的：点击按钮时，点击事件会沿着DOM树向上传递，触发父div的onClick回调——也就是先执行按钮的setShowList(true)，紧接着父div的setShowList(false)就会运行，最终showList还是false，下拉列表自然显示不出来。另外注意原代码里的buton是拼写错误，要改成button才能正常渲染。

解决方案1：阻止按钮事件冒泡 #

在按钮的点击事件中调用event.stopPropagation()，直接阻止事件向上冒泡到父元素。修改后的代码如下：

import React, { useState } from "react";

export default function App() {
  const [showList, setShowList] = useState(false);
  return (
    <div onClick={() => setShowList(false)}>
      <h1>Welcome Here</h1>
      <button onClick={(e) => {
        e.stopPropagation();
        setShowList(true);
      }}>Click here</button>
      {showList && (
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      )}
    </div>
  );
}

解决方案2：全局点击监听（更健壮的实现） #

如果后续下拉列表的结构更复杂（比如不在父div内部），推荐用全局点击监听的方式判断点击区域，这种方法逻辑更清晰，也避免了事件冒泡的困扰：

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

export default function App() {
  const [showList, setShowList] = useState(false);
  // 用ref标记下拉相关的元素
  const dropdownContainer = useRef(null);

  useEffect(() => {
    // 点击外部区域时关闭下拉
    const handleOutsideClick = (e) => {
      if (dropdownContainer.current && !dropdownContainer.current.contains(e.target)) {
        setShowList(false);
      }
    };

    // 添加全局监听
    document.addEventListener("mousedown", handleOutsideClick);
    // 组件卸载时移除监听，避免内存泄漏
    return () => document.removeEventListener("mousedown", handleOutsideClick);
  }, []);

  return (
    <div>
      <h1>Welcome Here</h1>
      {/* 将ref绑定到按钮和下拉列表容器 */}
      <div ref={dropdownContainer}>
        <button onClick={() => setShowList(!showList)}>Click here</button>
        {showList && (
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        )}
      </div>
    </div>
  );
}

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