停止点击事件在弹出框目标上传播

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。