反應引導下拉菜單中的多選

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

只需將Form.Group替換為Dropdown.Menu並將option替換為Dropdown.Item