极客教程React.js Blueprint Popover2 点击关闭
Blueprint 是基于React的Web界面工具包。这个库非常优化，并且在构建复杂和数据密集的桌面应用程序界面方面非常流行。
在本文中，我们将讨论React.js Blueprint Popover2在点击时关闭。Popover可以帮助显示浮动内容，紧邻目标元素。关闭点击用于关闭弹出元素及其嵌套的子元素。
BluePrint Popover2关闭点击类：
- Classes.POPOVER2_DISMISS: 这个类用于标记元素及其子元素为已关闭元素。
- Classes.POPOVER2_DISMISS_OVERRIDE: 这个类用于取消在POPOVER2_DISMISS类内部的关闭行为。
React.js BluePrint Popover2属性：
-
autoFocus ：它表示当遮罩层首次打开时是否应该获取应用程序焦点。
- backdropProps ：它表示用于背景元素的HTML props。
- boundary ：它表示用于flip和preventOverflow修饰器的边界元素。
- canEscapeKeyClose ：它表示按下ESC键是否应该调用onClose。
- captureDismiss ：当用户点击Classes.POPOVER_DISMISS元素内部时，只有在启用此属性时，当前的气泡窗口才会关闭，而外部的气泡窗口不会关闭。
- children ：它表示将触发气泡窗口的交互元素。
- className ：它表示要传递给子元素的一组用空格分隔的类名。
- content ：它表示将显示在弹出窗口内部的内容。
- defaultIsOpen ：它表示未控制时的初始打开状态。
- disabled ：当为真时，阻止弹出框出现。
- enforceFocus ：它指示覆盖层是否应防止焦点离开自身。
- fill ： It 指示包装器和目标是否应占据其容器的全部宽度。
- hasBackdrop ：启用弹出窗口下方的不可见覆盖层，捕获点击并防止在关闭弹出窗口之前与文档的其他部分进行交互。
- hoverCloseDelay : 它表示当用户悬停离开触发器后，弹出窗口应保持打开的时间（以毫秒为单位）。
- hoverOpenDelay : 它表示当用户悬停在触发器上后，弹出窗口打开之前应等待的时间（以毫秒为单位）。
- inheritDarkTheme : 它指示使用 Portal 的弹出窗口是否应自动继承父级的暗主题。
- interactionKind : 它表示触发弹出窗口显示的悬停交互的类型。
- isOpen : 它指示弹出窗口是否可见。
- lazy : 当此值设置为 true 且 usePortal 为 true 时，它是一个包含在第一次打开覆盖层时创建和附加到 DOM 的子元素的 Portal。
- onInteraction : 它是一个在受控模式下触发的回调函数，在用户交互导致弹出窗口打开状态更改时触发。
- onOpened : 它表示在CSS打开过渡结束后调用的生命周期方法。
- onOpening : 它表示在将子元素挂载到DOM后但在CSS打开过渡开始前调用的生命周期方法。
- openOnTargetFocus : 它指示是否应在弹出窗口的目标元素获得焦点时打开弹出窗口。
- placement : 它表示弹出窗口应该出现的位置。
- popoverClassName : 它表示一个由空格分隔的类名字符串，应用于弹出框元素。
- popoverRef : 它传递给Classes.POPOVER元素提供的ref。
- popupKind : 它表示弹出框显示的类型。
- portalClassName : 它表示一个由空格分隔的类名字符串，如果usePortal为true，则应用于Portal元素。
- portalContainer : 如果usePortal为true，则它表示覆盖层在其中渲染其内容的容器元素。
- position : 它表示弹出框应该出现的位置。与placement属性互斥。
- positioningStrategy : 用于Popper.js的定位策略。
- renderTarget : 表示接收由Popover2注入的props的目标渲染器，这些props应该传递给渲染的元素。
- rootBoundary : 用于flip和preventOverflow修饰器的根边界元素。
- shouldReturnFocusOnClose : 表示在这个浮动窗口关闭后，应用程序是否应该将焦点返回到文档中的最后活动元素。
- targetTagName : 表示目标元素的HTML标签名称。
- transitionDuration : 表示浮动窗口的出现/消失过渡所需的毫秒数。
- usePortal ：它表示弹出框是否应该在一个与portalContainer属性连接的Portal内渲染。
语法：
<div className={Classes.POPOVER2_DISMISS}>
<button>Dismiss</button>
<button disabled={true}>I can't dismiss</button>
<div className={Classes.POPOVER2_DISMISS_OVERRIDE}>
<button>I also not dismiss</button>
</div>
</div>
创建React应用程序和安装模块：
步骤1: 使用以下命令创建一个React应用程序：
npm create-react-app appname
步骤2： 在创建好项目文件夹（即appname）之后，使用以下命令进入该文件夹：
cd appname
步骤3 ：在创建ReactJS应用程序之后，使用以下命令安装所需的模块：
npm install @blueprintjs/core
项目结构：
示例1： 下面的示例演示了Popover2的POPOVER2_DISMISS类的使用方法。
App.js
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button } from "@blueprintjs/core";
import { Popover2, Classes } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
function App() {
return (
<center>
<div style={{ padding: 20, textAlign: "center",
color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>
ReactJS BluePrint Popover2 Closing on click
</h2>
</div>
<Popover2
position="bottom"
content={
<div
className={Classes.POPOVER2_DISMISS}
style={{ backgroundColor: "#F0EFEF",
padding: 20 }}
>
<Button intent="danger">
Dismiss
</Button>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button
{...targetProps}
elementRef={ref}
text="Delete"
intent="danger"
/>
)}
/>
</center>
);
}
export default App;
输出：
示例2： 下面的示例演示了使用POPOVER2_DISMISS_OVERRIDE类的popover2的用法。
App.js
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button, Callout } from "@blueprintjs/core";
import { Popover2, Classes } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
function App() {
return (
<center>
<div style={{ padding: 20, textAlign: "center",
color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>ReactJS BluePrint Popover2 Closing on click</h2>
</div>
<Popover2
position="bottom"
content={
<div
className={Classes.POPOVER2_DISMISS}
style={{ backgroundColor: "#F0EFEF",
padding: 20 }}
>
<Button intent="danger">Dismiss</Button>
<Callout intent="warning" className=
{Classes.POPOVER2_DISMISS}>
<p>Click callout to dismiss.</p>
<div>
<Button
className=
{Classes.POPOVER2_DISMISS_OVERRIDE}
intent="success"
text="Dismiss override"
/>
</div>
</Callout>
</div>
}
renderTarget={({ isOpen, ref, ...targetProps }) => (
<Button
{...targetProps}
elementRef={ref}
text="Delete"
intent="danger"
/>
)}
/>
</center>
);
}
export default App;
输出：
参考文献： https://blueprintjs.com/docs/#popover2-package/popover2.closing-on-click