React中点击按钮如何实现DropdownMenu的切换功能？

问题核心是：点击按钮时，handleToggle切换菜单状态的同时，handleClickOutside会因为按钮不在菜单列表范围内触发关闭操作，两次状态变更抵消，导致菜单无法收起。

修改步骤： #

1. 给触发按钮添加Ref，用于判断点击目标是否为按钮本身

const buttonRef = useRef<HTMLButtonElement>(null);

2. 给按钮绑定该Ref

<button ref={buttonRef} onClick={handleToggle}>Click me</button>

3. 更新handleClickOutside函数，排除点击按钮的情况

const handleClickOutside = (evt: MouseEvent) => {
  const target = evt.target as HTMLElement;
  // 仅当点击既不在菜单内，也不在按钮上时，才关闭菜单
  if (!menuListRef.current?.contains(target) && !buttonRef.current?.contains(target)) {
    setOpen(false);
  }
};

原理说明： #

修改后，点击按钮时，handleClickOutside会判断出目标是按钮，不再执行关闭操作，让handleToggle的状态切换逻辑正常生效，实现点击按钮切换菜单显示/隐藏的效果。

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