我试图在复选框更改时禁用弹出框打开,放置在弹出框目标内。我试过在复选框上停止onChange
和onClick
事件,但它没有按预期工作。
任何帮助将非常感激。
这是相关的代码沙箱:
import React from "react";
import ReactDOM from "react-dom";
import { Button, Checkbox, Menu, MenuItem, Popover } from "@blueprintjs/core";
import "./styles.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
function Dropdown() {
return (
<Menu>
<MenuItem text="Item 1" />
<MenuItem text="Item 2" />
</Menu>
);
}
function MyCheckbox() {
return (
<Checkbox
onClick={e => {
e.stopPropagation();
return false;
}}
/>
);
}
function App() {
return (
<div className="App">
<Popover content={<Dropdown />}>
<Button text={<MyCheckbox />} rightIcon="caret-down" />
</Popover>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);