React.js蓝图弹出控件2的控制模式

Blueprint 是一个基于React的Web用户界面工具包。该库非常优化且受欢迎，适用于构建复杂且数据密集的桌面应用程序界面。

在本文中，我们将讨论React.js蓝图弹出控件2的控制模式。弹出控件有助于在目标元素旁边显示浮动内容。在控制模式下，我们可以通过使用 isOpen 属性来修改弹出控件的行为。

React.js蓝图弹出控件2的属性：

autoFocus: 它指示当首次打开时叠加层是否应该获取应用程序焦点。
backdropProps: 它表示背景元素的HTML属性。
boundary: 它表示提供给翻转和防止溢出修饰符的边界元素。
canEscapeKeyClose: 它指示是否按ESC键应该调用onClose。
captureDismiss: 当用户点击Classes.POPOVER_DISMISS元素内部时，仅关闭当前的弹出框，而不是外部的弹出框（当启用了此属性时）。
children: 它表示将触发弹出框的交互元素。
- className: 它表示一个以空格分隔的类名称列表，用于传递给子元素。
- content: 它表示将显示在弹出窗口内部的内容。
- defaultIsOpen: 它表示当未受控时的初始打开状态。
- disabled: 当为true时，它会阻止弹出窗口的出现。
- enforceFocus: 它指示覆盖层是否应防止焦点离开自身。
- fill: 它指示包装器和目标是否应占据其容器的整个宽度。
- hasBackdrop: 当启用时，在弹出窗口下方会有一个无形的覆盖层，捕获点击事件并在弹出窗口关闭之前阻止与文档其他部分的交互。
- hoverCloseDelay: 它表示当用户将鼠标悬停在触发器上后，弹出框应保持打开的时间，单位为毫秒。
- hoverOpenDelay: 它表示当用户将鼠标悬停在触发器上后，弹出框打开前等待的时间，单位为毫秒。
- inheritDarkTheme: 它指示使用 Portal 的弹出框是否应自动继承其父级的暗色主题。
- interactionKind: 它表示触发弹出框显示的悬停交互类型。
- isOpen: 它表示弹出框是否可见。
- lazy: 它是一个包含在首次打开叠加层时创建并附加到 DOM 中的子级的门户，当此属性设置为 true 并且 usePortal 为 true 时。
- matchTargetWidth: 它指示弹出框内容是否应该被调整为与目标的宽度相匹配。
- minimal: 它指示是否对这个弹出框应用最小的样式。
- modifiers: 它覆盖了Popper.js内置的修饰符。
- modifiersCustom: 它表示要添加到popper实例的自定义修饰符。
- onClose: 这是一个回调函数，当用户交互引起覆盖层关闭时触发。
- onClosed: 它表示在CSS关闭过渡结束之后但子元素从DOM中被删除之前调用的生命周期方法。
- onClosing:
- 它表示在子元素进行CSS关闭过渡之前调用的生命周期方法。
- onInteraction： 它是一个回调函数，在受控模式下，当弹出窗口的打开状态由于用户交互而发生变化时触发。
- opened： 它表示在CSS打开过渡结束后调用的生命周期方法。
- onOpening： 它表示在将子元素挂载到DOM中后但在CSS打开过渡开始之前调用的生命周期方法。
- openOnTargetFocus： 它指示当目标元素聚焦时，弹出窗口是否应该打开。
- placement： 它表示弹出窗口应该出现的位置。
- popoverClassName: 它表示应用于弹出窗口元素的一组空格分隔的类名字符串。
- popoverRef: 它传递给Classes.POPOVER元素的引用。
- popupKind: 它表示弹出窗口的类型由弹出窗口指示。
- portalClassName: 它表示如果usePortal为true，则应用于Portal元素的一组空格分隔的类名字符串。
- portalContainer: 它表示当usePortal为true时覆盖渲染其内容的容器元素。
- position: 它表示弹出窗口应该出现的位置。与placement属性互斥。
- positioningStrategy: 这用于Popper.js的定位策略。
- renderTarget: 它表示接收Popover2注入的props的目标渲染器，这些props应该被展开到渲染元素上。
- rootBoundary: 它表示为翻转和preventOverflow修饰器提供的根边界元素。
- shouldReturnFocusOnClose: 它表示在此弹出窗关闭后，应用程序是否应将焦点返回到文档中的上一个活动元素。
- targetTagName: 它表示目标元素的HTML标签名。
- transitionDuration: 它表示弹出窗出现/消失过渡的持续时间，以毫秒为单位。
- usePortal： 它表示popover是否应该在与portalContainer prop连接的Portal内部渲染。

语法:

<Popover2
    isOpen={...}
    ...
/>

创建React应用程序并安装模块：

步骤1： 使用以下命令创建React应用程序：

npm create-react-app appname

步骤2： 在创建项目文件夹，即appname之后，使用以下命令进入它：

cd appname

步骤3： ：在创建ReactJS应用程序之后，使用以下命令安装所需模块：

npm install @blueprintjs/core
npm install @blueprintjs/popover2

项目结构：

React.js蓝图弹出控件2的控制模式

步骤4： 按以下方式运行项目：

npm start

示例1： 下面的示例展示了受控模式弹出内容框的用法。

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 
class App extends React.Component<{}, { isOpen: boolean }> {
    state = { isOpen: true };
 
    render() {
        return (
            <center>
                <div style={{ textAlign: "center", 
                    color: "green" }}>
                    <h1>GeeksforGeeks</h1>
                    <h2>
                        ReactJS BluePrint Popover2 Controlled Mode
                    </h2>
                </div>
                <Popover2
                    content={
                        <div style={{ backgroundColor: "#F0EFEF", 
                            padding: 20 }}>
                            <h2>GeeksforGeeks</h2>
                            <p>Popover2</p>
                        </div>
                    }
                    interactionKind="click"
                    isOpen={this.state.isOpen}
                    placement="right"
                >
                    <Button text="Click" intent="success" />
                </Popover2>
            </center>
        );
    }
 
}
 
export default App;

输出：

React.js蓝图弹出控件2的控制模式

注意: 在上述输出中，弹出窗口默认开启，因为isOpen属性为true，关闭后不可重新打开，因为未使用onInteraction属性来处理交互。

示例2: 下面的示例演示了在弹出窗口中使用受控模式以及handlingInteraction（是否在点击时打开弹出窗口，受控弹出窗口即使isOpen={true}也将保持关闭状态）。

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 
class App extends React.Component<{}, { isOpen: boolean }> {
    state = { isOpen: true };
 
    render() {
        return (
            <center>
                <div style={{ textAlign: "center", 
                    color: "green" }}>
                    <h1>GeeksforGeeks</h1>
                    <h2>
                        ReactJS BluePrint Popover2 Controlled Mode
                    </h2>
                </div>
                <Popover2
                    content={
                        <div style={{ backgroundColor: "#F0EFEF", 
                            padding: 20 }}>
                            <h2>GeeksforGeeks</h2>
                            <p>Popover2</p>
                        </div>
                    }
                    interactionKind="click"
                    isOpen={this.state.isOpen}
                    onInteraction={(state) => 
                        this.handleInteraction(state)}
                    placement="right"
                >
                    <Button text="Click" intent="success" />
                </Popover2>
            </center>
        );
    }
 
    handleInteraction(nextOpenState: boolean) {
        this.setState({ isOpen: nextOpenState });
    }
}
 
export default App;

输出：

React.js蓝图弹出控件2的控制模式