我试图禁用弹出窗口在复选框更改时打开,放置在弹出窗口目标内。我试过停止复选框上的 onChange
和 onClick
事件,但它没有按预期工作。
如有任何帮助,我们将不胜感激。
这里是相关代码sandbox :
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);
最佳答案
将您的复选框包裹在另一个容器中,并防止它向上传播链:
function MyCheckbox() {
return (
<div
onClick={e => {
e.stopPropagation();
}}
>
<Checkbox />
</div>
);
}
查看更新的沙箱 here .
关于reactjs - 阻止点击事件在弹出窗口目标上传播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53026172/