react bootstrap下拉列表中的多选
react bootstrap下拉列表中的多选
提问于 2021-06-17 16:28:27
我试图在React Bootstrap下拉列表中实现多选(类似于全选)并取消全选作为下拉项。
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">**Select All**</Dropdown.Item>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
<Dropdown.Item href="#/action-1">**Deselect All**</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>如何实现全选和取消全选功能？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-17 23:55:39
我相信这段代码应该可以为你工作：
import React, { useState } from "react";
import { Col, Form } from "react-bootstrap";
export default function App() {
const [field, setField] = useState([]);
return (
<Form.Group as={Col} controlId="my_multiselect_field">
<Form.Label>My multiselect</Form.Label>
<Form.Control as="select" multiple value={field} onChange={e => setField([].slice.call(e.target.selectedOptions).map(item => item.value))}>
<option value="field1">Field 1</option>
<option value="field2">Field 2</option>
<option value="field3">Field 3</option>
</Form.Control>
</Form.Group>
);
}只需将Form.Group替换为Dropdown.Menu，将option替换为Dropdown.Item
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68015675
复制相关文章
相似问题
腾讯云开发者
