在react引导程序下拉列表中进行多选

Question

我正在尝试实现多选(类似于全选(，并在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>

如何实现全选和取消全选功能？

Answer 1

我相信这段代码应该适用于您：

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>
);
}

仅用Dropdown.Menu替换Form.Group，用Dropdown.Item替换option