React中Bootstrap下拉菜单onClick事件异常，点击图标无法二次隐藏菜单求助

问题原因 #

你额外维护的showDropdown状态和react-bootstrap Dropdown组件内部的状态管理冲突了。Dropdown本身已经内置了菜单展开/收起的状态逻辑，手动绑定自定义的点击事件切换state，会导致组件内部状态与你的自定义state不同步，出现“点击一次显示，再次点击无法隐藏”的问题。

解决方案 #

方案1：使用组件默认行为（最简） #

直接去掉自定义的useState和handleToggle，依赖Dropdown组件的内置逻辑即可。Dropdown.Toggle默认会自动控制菜单的显示与隐藏，且点击Dropdown.Item后菜单会自动关闭。

import { Dropdown } from "react-bootstrap";
import React from 'react';

const YourComponent = () => {
  return (
    <Dropdown>
      <Dropdown.Toggle className="btn btn-dark">
        <i>{icons['Menu']}</i>
      </Dropdown.Toggle>

      <Dropdown.Menu className="nav-container border-secondary-subtle border border-3">
        <Dropdown.Item href="#" className="nav-items">
          Dashboard
        </Dropdown.Item>
        <Dropdown.Item href="#" className="nav-items">
          Courses
        </Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
};

方案2：自定义状态控制（需外部控制菜单时） #

如果确实需要通过自定义state控制菜单状态，要将state与Dropdown组件的show、onToggle属性绑定，确保内部状态与自定义state同步：

import { Dropdown } from "react-bootstrap";
import React, { useState } from 'react';

const YourComponent = () => {
  const [showDropdown, setShowDropdown] = useState(false);

  // 接收Dropdown组件内部的切换状态
  const handleToggle = (isOpen) => {
    setShowDropdown(isOpen);
  };

  return (
    <Dropdown show={showDropdown} onToggle={handleToggle}>
      <Dropdown.Toggle className="btn btn-dark">
        <i>{icons['Menu']}</i>
      </Dropdown.Toggle>

      <Dropdown.Menu className="nav-container border-secondary-subtle border border-3">
        {/* 点击菜单项后手动关闭菜单 */}
        <Dropdown.Item 
          href="#" 
          className="nav-items"
          onClick={() => setShowDropdown(false)}
        >
          Dashboard
        </Dropdown.Item>
        <Dropdown.Item 
          href="#" 
          className="nav-items"
          onClick={() => setShowDropdown(false)}
        >
          Courses
        </Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
};

也可以通过Dropdown的onSelect事件统一处理菜单项点击关闭：

<Dropdown 
  show={showDropdown} 
  onToggle={handleToggle}
  onSelect={() => setShowDropdown(false)}
>
  {/* ... 菜单内容 ... */}
</Dropdown>

关键注意点 #

• 不要同时使用自定义state和Dropdown组件的内置状态逻辑，二者选其一即可。
• 若在Dropdown.Toggle内部元素绑定点击事件，避免阻止事件冒泡，否则会干扰组件的内置切换逻辑。

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