在反应 bootstrap 下拉列表中多选

Question

我正在尝试在 React Bootstrap 下拉列表中实现一个 multi select（类似于 select all）和 deselect all 作为下拉项.

<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>

如何实现 select all 和 deselect all 功能？

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

只需将 Form.Group 替换为 Dropdown.Menu，将 option 替换为 Dropdown.Item

在反应 bootstrap 下拉列表中多选

Multiselect in react bootstrap dropdown

javascript

drop-down-menu

reactjs

bootstrap-4