reactjs - 阻止点击事件在弹出窗口目标上传播

Question

我试图禁用弹出窗口在复选框更改时打开，放置在弹出窗口目标内。我试过停止复选框上的 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);

Answer 1

将您的复选框包裹在另一个容器中，并防止它向上传播链:

function MyCheckbox() {
  return (
    <div
      onClick={e => {
        e.stopPropagation();
      }}
    >
      <Checkbox />
    </div>
  );
}

查看更新的沙箱 here .