如何在下拉切换中获得多个选定的列表项值?

Question

需要在下拉开关中获得所有选定的值，而不移除先前加载的值，请帮助

const [selectedItem, setSelectedItem] = useState("Select...");
<Dropdown className="dropdown-groove">
<Dropdown.Toggle variant="outline-secondary " id="dropdown-basic">
{selectedItem}
<label className="dropdown-label">Dropdown label</label>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">
{" "}
<Form.Check
onClick={(e) => {
setSelectedItem("List A");
e.stopPropagation();
}}
className="checkbox-groove"
inline
label="List Item 1"
name="group1"
type="checkbox"
/>{" "}
</Dropdown.Item>
<Dropdown.Item href="#/action-2">
{" "}
<Form.Check
onClick={(e) => {
setSelectedItem("List b");
e.stopPropagation();
}}
className="checkbox-groove"
inline
label="List Item 2"
name="group1"
type="checkbox"
/>{" "}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

https://codesandbox.io/s/dropdown-with-checkboxs-nvw3hz

Answer 1

可以在第6行setState之后声明一个函数

function toggleCheckbox(addItem) {
if (selectedItem.indexOf(addItem) < 0) {
setSelectedItem(`${selectedItem} ${addItem}`);
} else {
setSelectedItem(selectedItem.replace(addItem, ""));
}
} 

，用toggleCheckbox("List A");代替setSelectedItem("List A");然后，List b &C用同样的方法替换。

codebox