如何在React Bootstrap Dropdown Toggle中获取所有选中列表项的值且保留已选值？

我来帮你搞定这个多选Dropdown的需求！当前你的代码里用了单个字符串selectedItem来存选中值，每次点击Checkbox都会直接覆盖掉之前的内容，这就是为什么没法保留历史选择的原因。咱们把状态改成数组来存储多个选中项，再调整一下逻辑就能实现需求了，具体步骤如下：

关键修改点 #

• 把状态从单个字符串改成数组，用来存储所有选中的项
• 用onChange事件处理Checkbox的选择（比onClick更贴合表单控件的交互逻辑）
• 动态判断当前项是否已选中，实现“选中/取消选中”的切换
• 在Toggle中根据数组内容动态显示提示文本或所有选中项

修改后的完整代码 #

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

export default function App() {
  // 用数组存储选中的项，初始为空
  const [selectedItems, setSelectedItems] = useState([]);

  // 处理Checkbox的选择逻辑
  const handleCheckboxChange = (label) => {
    setSelectedItems(prev => {
      if (prev.includes(label)) {
        // 如果已选中，就移除该项
        return prev.filter(item => item !== label);
      } else {
        // 如果未选中，就添加该项
        return [...prev, label];
      }
    });
  };

  // 处理Toggle显示的文本
  const getToggleText = () => {
    if (selectedItems.length === 0) {
      return "Select...";
    }
    // 用逗号分隔所有选中项
    return selectedItems.join(", ");
  };

  return (
    <Dropdown className="dropdown-groove">
      <Dropdown.Toggle variant="outline-secondary" id="dropdown-basic">
        {getToggleText()}
        <label className="dropdown-label">Dropdown label</label>
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item as="div"> {/* 改成div避免默认跳转行为 */}
          <Form.Check
            className="checkbox-groove"
            inline
            label="List Item 1"
            name="group1"
            type="checkbox"
            // 绑定checked状态，同步选中状态
            checked={selectedItems.includes("List Item 1")}
            onChange={() => handleCheckboxChange("List Item 1")}
          />
        </Dropdown.Item>
        <Dropdown.Item as="div">
          <Form.Check
            className="checkbox-groove"
            inline
            label="List Item 2"
            name="group1"
            type="checkbox"
            checked={selectedItems.includes("List Item 2")}
            onChange={() => handleCheckboxChange("List Item 2")}
          />
        </Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

代码解释 #

1. 状态修改：selectedItems数组用来存储所有选中的标签文本，每次选择都会更新这个数组而不是覆盖
2. 选择逻辑：handleCheckboxChange函数接收当前项的标签，通过判断是否在数组中来决定添加或移除，用函数式更新保证状态的准确性
3. Toggle文本：getToggleText函数根据数组长度动态显示提示或选中项，用户体验更友好
4. Checkbox状态同步：给Form.Check添加checked属性，让Checkbox的UI状态和我们的数组状态保持一致，不会出现“点了但没选中”的情况
5. 移除跳转行为：把Dropdown.Item的as设为div，避免默认的href跳转干扰选择逻辑

这样修改后，你就能在Toggle中看到所有选中的项，而且之前的选择也会被保留，点击Checkbox可以自由切换选中状态啦！

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