如何避免在下拉列表中单击复选框时隐藏下拉菜单？

Question

需要避免在下拉列表项目中单击“复选框”时隐藏下拉菜单。下拉菜单应该隐藏当点击外面的下拉和下拉按钮区域，也选择的项目值应该加载在下拉切换文本区域。请帮助我，我正在使用react引导下拉。

 <Dropdown className="dropdown-groove">
        <Dropdown.Toggle variant="outline-secondary " id="dropdown-basic">
          Select...
          <label className="dropdown-label">Dropdown label</label>
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item href="#/action-1">
            {" "}
            <Form.Check
              className="checkbox-groove"
              inline
              label="Unselected"
              name="group1"
              type="checkbox"
            />{" "}
          </Dropdown.Item>
          <Dropdown.Item href="#/action-2">List Item 2</Dropdown.Item>
          <Dropdown.Item href="#/action-3">List Item 3</Dropdown.Item>
          <Dropdown.Item href="#/action-4">List Item 4</Dropdown.Item>
          <Dropdown.Item href="#/action-5">List Item 5</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>

https://codesandbox.io/s/dropdown-with-checkbox-nvw3hz

Answer 1

在onClick={(e) => e.stopPropagation()}中添加<Form.Check>...</Form.Check>。标记中的e.stopPropagation()将帮助此标记防止onClick事件来自父级。

代码：https://codesandbox.io/s/dropdown-with-checkbox-forked-88h9m6?file=/src/App.js

import "./styles.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import { Dropdown, Form } from "react-bootstrap";
export default function App() {
  return (
    <div className="App">
      <Dropdown className="dropdown-groove">
        <Dropdown.Toggle variant="outline-secondary " id="dropdown-basic">
          Select...
          <label className="dropdown-label">Dropdown label</label>
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item href="#/action-1">
            {" "}
            <Form.Check
              onClick={(e) => e.stopPropagation()} //<=== Add here
              className="checkbox-groove"
              inline
              label="Unselected"
              name="group1"
              type="checkbox"
            />{" "}
          </Dropdown.Item>
          <Dropdown.Item href="#/action-2">List Item 2</Dropdown.Item>
          <Dropdown.Item href="#/action-3">List Item 3</Dropdown.Item>
          <Dropdown.Item href="#/action-4">List Item 4</Dropdown.Item>
          <Dropdown.Item href="#/action-5">List Item 5</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}