需要避免在單擊下拉串列項中的“復選框”時隱藏下拉選單。在下拉和下拉切換按鈕區域之外單擊時，下拉選單應隱藏，所選專案值也應加載到下拉切換文本區域中。請幫忙，我正在使用 react-bootstrap 下拉選單
<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
uj5u.com熱心網友回復：
加入.
onClick={(e) => e.stopPropagation()}_ in 標簽將幫助此標簽防止來自父級的 onClick 事件。<Form.Check>...</Form.Check>e.stopPropagation()
此處代碼：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>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/477007.html