如何使用React-Bootstrap的Form.Control实现多选下拉选择器

问题根因 #

你当前使用原生select标签加multiple属性的写法，浏览器默认会将这类选择器渲染为展开的列表样式，而非折叠的下拉多选框，这是浏览器原生行为，和React-Bootstrap本身无关。

解决方案 #

完全基于React-Bootstrap自带的Dropdown和Form.Check组件组合实现，不需要引入额外第三方依赖，样式和现有React-Bootstrap项目天然适配：

完整实现代码 #

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

function InstructorSelect() {
  // 选中项状态，存储选中的讲师id数组
  const [selectedInstructors, setSelectedInstructors] = useState([]);
  // 你的选项数据源
  const items = [];

  // 处理选项勾选/取消勾选
  const handleCheck = (itemId) => {
    setSelectedInstructors(prev => 
      prev.includes(itemId) 
        ? prev.filter(id => id !== itemId)
        : [...prev, itemId]
    );
  };

  return (
    <Form.Group controlId="instructors" className="mb-3">
      <Form.Label>选择讲师</Form.Label>
      <Dropdown>
        {/* 下拉触发按钮，显示当前选中状态 */}
        <Dropdown.Toggle variant="light" className="w-100 text-start d-flex align-items-center justify-content-between">
          {selectedInstructors.length === 0 
            ? "Pilih Instruktur..." 
            : `已选中 ${selectedInstructors.length} 项`
          }
        </Dropdown.Toggle>
        {/* 下拉选项容器，可自定义最大高度避免选项过长 */}
        <Dropdown.Menu className="w-100 p-2" style={{ maxHeight: '300px', overflowY: 'auto' }}>
          {items?.map((item, index) => (
            <Form.Check
              key={item.id}
              type="checkbox"
              id={`instructor-${item.id}`}
              label={`test${index}`}
              checked={selectedInstructors.includes(item.id)}
              onChange={() => handleCheck(item.id)}
              className="mb-1"
            />
          ))}
        </Dropdown.Menu>
      </Dropdown>
      {/* 如果需要兼容原生表单提交逻辑，添加隐藏控件存储选中值 */}
      <Form.Control
        required
        type="hidden"
        value={selectedInstructors.join(',')}
      />
    </Form.Group>
  )
}

可选优化 #

如果需要在触发按钮上显示选中的具体名称，可修改Dropdown.Toggle内的展示逻辑，根据selectedInstructors匹配对应项的名称显示即可，如果选中项超过2个，可 fallback 到显示选中数量避免按钮内容过长。

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