如何在下拉切换中获得多个选定的列表项值？
如何在下拉切换中获得多个选定的列表项值？
提问于 2022-05-19 13:30:39
需要从下拉菜单中获取所有选定的值，然后移除以前加载的值，请帮助
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>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-05-19 15:39:11
您可以在第6行的setState之后声明一个函数
function toggleCheckbox(addItem) {
if (selectedItem.indexOf(addItem) < 0) {
setSelectedItem(`${selectedItem} ${addItem}`);
} else {
setSelectedItem(selectedItem.replace(addItem, ""));
}
} 然后将setSelectedItem("List A");替换为toggleCheckbox("List A");，列表B&C是相同的替换方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72305471
复制相关文章
相似问题
腾讯云开发者
