Question

我正尝试禁用放置在popover目标内部的复选框更改时打开的popover。我尝试停止复选框上的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。

阻止点击事件在弹出式广告目标上传播

1 个答案: