React-Bootstrap自定义Dropdown.Item点击后下拉菜单无法关闭的问题

要实现点击自定义Dropdown.Item时先执行业务代码再关闭下拉菜单，你需要利用React-Bootstrap提供的菜单状态控制能力，而不是直接调用自定义Toggle组件的方法（因为CustomToggle是React组件而非DOM元素，不存在click()方法）。

修改步骤与代码示例 #

1. 引入useDropdown钩子：通过这个钩子可以获取到控制下拉菜单显示/隐藏的toggle方法。
2. 将toggle方法传递给自定义CustomItem：在点击事件中完成业务逻辑后调用该方法关闭菜单。

修改后的完整代码如下：

import React, { forwardRef } from 'react';
import { Dropdown, useDropdown } from 'react-bootstrap';

const AnalysisMenu = () => {
  // 获取下拉菜单的toggle控制方法
  const { toggle } = useDropdown();

  const CustomToggle = forwardRef(({ onClick }, ref) => (
    <MenuIcon
      onClick={(e) => {
        e.preventDefault();
        onClick(e);
      }}
      ref={ref}
      className="analysisMenu__toggle-icon"
    />
  ));

  const CustomItem = forwardRef(({ data, onToggle }, ref) => {
    if (data.url) {
      return (
        <li className="dropdown-item" ref={ref}>
          <a title={data.label} target="_blank" href={data.url}>
            {data.label}
          </a>
        </li>
      );
    }
    if (!data.url && data.action && data.actionLink) {
      return (
        <li
          title={data.label}
          ref={ref}
          className="dropdown-item"
          onClick={() => {
            // 先执行业务逻辑
            switch (data.action) {
              case "1":
                somefunction1();
                break;
              case "2":
                somefunction2();
                break;
              case "3":
                somefunction3();
                break;
              case "4":
                somefunction4();
                break;
              case "5":
                somefunction5();
                break;
              case "6":
                somefunction6();
                break;
              default:
                break;
            }
            // 执行完成后关闭下拉菜单
            onToggle();
          }}
        >
          {data.label}
        </li>
      );
    }

    return null;
  });

  const CustomMenu = forwardRef(
    ({ children, style, className, "aria-labelledby": labeledBy}, ref) => {
      return (
        <div ref={ref} style={style} className={`${className}`} aria-labelledby={labeledBy}>
          <ul className="list-unstyled flex-shrink mb-0" style={{ overflow: "auto" }}>
            {children}
          </ul>
        </div>
      );
    }
  );

  return (
    <Dropdown className="analysisMenu" >
      <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />

      <Dropdown.Menu as={CustomMenu}>
        {menuItems.map((item) => (
          <Dropdown.Item key={item.id} as={CustomItem} data={item} onToggle={toggle} />
        ))}
      </Dropdown.Menu>
    </Dropdown>
  );
};

export default AnalysisMenu;

替代方案：使用Dropdown的Ref #

如果不想用useDropdown钩子，也可以通过ref直接获取Dropdown实例来调用toggle方法：

import React, { forwardRef, useRef } from 'react';
import { Dropdown } from 'react-bootstrap';

const AnalysisMenu = () => {
  const dropdownRef = useRef(null);

  // ... 其他组件定义不变

  const CustomItem = forwardRef(({ data }, ref) => {
    // ... 其他逻辑不变
    onClick={() => {
      // 执行业务代码
      // ...
      // 调用Dropdown实例的toggle方法关闭菜单
      dropdownRef.current?.toggle();
    }}
    // ...
  });

  return (
    <Dropdown className="analysisMenu" ref={dropdownRef}>
      {/* ... 其他内容不变 */}
    </Dropdown>
  );
};

关键说明 #

• 直接调用CustomToggle.click()无效的原因：CustomToggle是React组件，不是真实的DOM节点，组件本身没有click方法，只有DOM元素才有。
• React-Bootstrap的Dropdown内部维护了菜单的显示状态，通过useDropdown钩子或组件ref获取的toggle方法，能正确触发菜单的关闭逻辑，同时保持组件状态的一致性。

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