React+Bootstrap下拉框：实现多选及输入搜索时不关闭

核心问题分析 #

你遇到的本质问题是Bootstrap原生下拉的DOM状态控制和React的组件重渲染逻辑冲突：Bootstrap靠手动添加/移除show类控制下拉显隐，而React状态更新会重新渲染组件，覆盖掉Bootstrap的DOM状态，导致下拉意外关闭。同时，搜索框作为受控组件，状态更新触发重渲染，进一步加剧了这个问题。

解决方案：完全用React状态控制下拉显隐 #

放弃依赖Bootstrap的data-bs-toggle原生逻辑，改用React状态管理下拉的打开/关闭，同时通过事件阻止和外部点击监听实现需求。

1. 基础实现（含搜索+多选）

import { useState, useEffect, useRef } from 'react';

const MultiSelectDropdown = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [filterText, setFilterText] = useState('');
  const [selectedItems, setSelectedItems] = useState([]);
  const dropdownRef = useRef(null);

  // 监听外部点击，关闭下拉
  useEffect(() => {
    const handleOutsideClick = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleOutsideClick);
    return () => document.removeEventListener('mousedown', handleOutsideClick);
  }, []);

  // 过滤选项
  const allOptions = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
  const filteredOptions = allOptions.filter(opt => 
    opt.toLowerCase().includes(filterText.toLowerCase())
  );

  // 切换选项选中状态
  const toggleItemSelection = (item) => {
    setSelectedItems(prev => 
      prev.includes(item) 
        ? prev.filter(i => i !== item) 
        : [...prev, item]
    );
  };

  return (
    <div className="dropdown" ref={dropdownRef}>
      {/* 下拉触发按钮 */}
      <button 
        className="btn btn-secondary dropdown-toggle"
        type="button"
        onClick={() => setIsOpen(prev => !prev)}
      >
        {selectedItems.length > 0 ? selectedItems.join(', ') : '选择选项'}
      </button>

      {/* 下拉菜单：用isOpen控制show类 */}
      <ul className={`dropdown-menu ${isOpen ? 'show' : ''}`} style={{ maxHeight: '300px', overflowY: 'auto' }}>
        {/* 搜索栏 */}
        <li className="px-3 py-2">
          <input 
            type="text"
            className="form-control form-control-sm"
            placeholder="搜索选项..."
            value={filterText}
            onChange={(e) => setFilterText(e.target.value)}
            onClick={(e) => e.stopPropagation()} {/* 点击搜索框不关闭下拉 */}
          />
        </li>

        {/* 过滤后的选项列表 */}
        {filteredOptions.map(item => (
          <li key={item}>
            <button 
              className={`dropdown-item ${selectedItems.includes(item) ? 'active' : ''}`}
              onClick={(e) => {
                e.stopPropagation(); {/* 点击选项不关闭下拉 */}
                toggleItemSelection(item);
              }}
            >
              {item}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MultiSelectDropdown;

2. 拆分下拉菜单为子组件

如果要把<ul>部分拆成子组件，确保所有依赖的状态和回调都通过props传递，避免子组件独立维护状态导致的显隐异常：

// DropdownMenu.jsx
const DropdownMenu = ({ 
  isOpen, 
  filterText, 
  setFilterText, 
  filteredOptions, 
  selectedItems, 
  toggleItemSelection 
}) => {
  return (
    <ul className={`dropdown-menu ${isOpen ? 'show' : ''}`} style={{ maxHeight: '300px', overflowY: 'auto' }}>
      <li className="px-3 py-2">
        <input 
          type="text"
          className="form-control form-control-sm"
          placeholder="搜索选项..."
          value={filterText}
          onChange={(e) => setFilterText(e.target.value)}
          onClick={(e) => e.stopPropagation()}
        />
      </li>
      {filteredOptions.map(item => (
        <li key={item}>
          <button 
            className={`dropdown-item ${selectedItems.includes(item) ? 'active' : ''}`}
            onClick={(e) => {
              e.stopPropagation();
              toggleItemSelection(item);
            }}
          >
            {item}
          </button>
        </li>
      ))}
    </ul>
  );
};

export default DropdownMenu;

在父组件中使用：

// 父组件中导入DropdownMenu
import DropdownMenu from './DropdownMenu';

// ... 其他代码不变
return (
  <div className="dropdown" ref={dropdownRef}>
    <button 
      className="btn btn-secondary dropdown-toggle"
      type="button"
      onClick={() => setIsOpen(prev => !prev)}
    >
      {selectedItems.length > 0 ? selectedItems.join(', ') : '选择选项'}
    </button>
    <DropdownMenu 
      isOpen={isOpen}
      filterText={filterText}
      setFilterText={setFilterText}
      filteredOptions={filteredOptions}
      selectedItems={selectedItems}
      toggleItemSelection={toggleItemSelection}
    />
  </div>
);

关键细节说明 #

• 手动控制show类：通过isOpen状态直接控制下拉菜单的show类，确保React重渲染时不会丢失显隐状态。
• 阻止事件冒泡：在搜索框和选项的点击事件中调用e.stopPropagation()，避免事件触发外部的点击关闭逻辑。
• 受控搜索框：必须绑定value={filterText}，状态更新时isOpen保持true，所以下拉不会关闭，同时输入内容能同步到state用于过滤。
• 外部点击监听：用useRef标记下拉框容器，监听document的点击事件，判断点击区域是否在容器内，实现点击外部关闭下拉。

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