如何使用 React-Bootstrap 的 Popover

2020-05-07 08:00:00 · 飞浪

介绍弹出框是用户点击特定HTML元素时出现的弹出框。它与工具提示元素非常相似，用于向用户显示静态信息。不过，工具提示和弹出框之间的区别在于，弹出框会显示有意义的内容以及标题，而工具提示

介绍

弹出框是用户点击特定 HTML 元素时出现的弹出框。它与工具提示元素非常相似，用于向用户显示静态信息。不过，工具提示和弹出框之间的区别在于，弹出框会显示有意义的内容以及标题，而工具提示仅包含文本而没有标题。

在本指南中，您将学习如何在 React 应用程序中安装 Bootstrap 并将弹出窗口组件与元素集成。

在 React 中安装 Bootstrap

要在 React 应用程序中使用 Bootstrap，请使用React 中提供的reactstrap库。

Reactstrap 是一个包含各种 Bootstrap 组件的库，这些组件是专门为 React 应用设计和开发的。以下是reactstrap的一些组件。

卡片
形式
警报
旋转木马
布局
分页
弹出窗口
表格
情态动词

通过使用reactstrap中的组件，您可以集成和实现 Bootstrap 的各种元素。

在使用任何reactstrap组件之前，请使用npm命令安装其官方库，如下所示：

      npm install reactstrapnpm 
install bootstrap
    

安装包后，下一步是将 bootstrap CSS 添加到根组件中，因为reactstrap没有其 CSS 配置。

将以下语句添加到你的 React 应用程序的index.js文件中。

      import 'bootstrap/dist/css/bootstrap.min.css';

现在应用程序已准备好集成reactstrap组件。

Reactstrap Popover 的属性

在使用reactstrap popover 之前，请了解 React 应用程序中的 popover 组件需要实现哪些属性。

在将弹出窗口集成到 React 组件中时，应该注意以下几个属性：

isOpen：此属性决定弹出框是否可见，是弹出框最需要的属性。
目标：目标使用目标属性来指定用户触发操作并出现弹出窗口的特定目标元素。
Toggle：Toggle 用于使用附加到 props 的函数来隐藏和显示弹出窗口。此函数将使用状态值切换isOpen的当前模式，即 true/false。
Placement：此属性用于定义弹出窗口的位置。有四个选项可用：左、右、上和下。这些是将弹出窗口集成到 React 应用程序中并使其发挥作用的基本属性。

集成 Reactstrap Popover

现在您已经对reactstrap popover 有了基本的了解，让我们在一些实际的例子中实现它。

在下面的例子中，您可以看到有一个带有id 的按钮。

      <Button id="mypopover" type="button">  
    Click to Launch Popover
</Button>```

It is a simple button control along with the added property `id`; this is important to specify because soon you'll use the targeted element for the popover.

The next step is to implement popover control in the same scope as the button control, as shown below:


```jsx
<Popover  
    placement="bottom"  
    isOpen={popoverOpen}  
    target="mypopover"  
    toggle={this.togglePopover}
>  
    <PopoverHeader>This is popover title</PopoverHeader> 
    <PopoverBody>    
         This is simple popover content  
    </PopoverBody>
</Popover>
    

在上面的例子中，使用了三个 HTML 标签：

Popover：这是弹出窗口控件的主要容器，在容器内，您可以指定不同的元素或文本。
PopoverHeader：用于确定弹出控件的标题。
PopoverBody：用于指定弹出控件的主体内容。

除了这些标签之外，还使用了四个不同的属性：isOpen，toggle，target和placement，上面提到过。

以下是reactstrap popover的完整示例：

      import React, { Component } from "react";
import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap";

class SimplePopover extends Component {
  constructor() {    
    super();    
    this.state = {      
      name: "React",      
      popoverOpen: false    
    };
    this.togglePopover = this.togglePopover.bind(this);

  }


togglePopover() {    
  this.setState({ popoverOpen: !this.state.popoverOpen })  
}

render() {
    const { popoverOpen } = this.state;

    return (
      <div>
        <Button id="mypopover" type="button">
          Click to Launch Popover
        </Button>
        <Popover
          placement="bottom"
          isOpen={popoverOpen}
          target="mypopover"
          toggle={this.togglePopover}
        >
          <PopoverHeader>This is popover title</PopoverHeader>
          <PopoverBody>
            This is simple popover content
          </PopoverBody>
        </Popover>
      </div>
    );
  }
}

export default SimplePopover;
    

当您单击该按钮时，将会根据属性值的位置出现一个弹出窗口。

当用户点击按钮时，popoverOpen的布尔值会使用下面的函数发生变化。

      togglePopover() {
    this.setState({ popoverOpen: !this.state.popoverOpen })}
    

每次单击按钮时，状态值都会更新，并且弹出窗口组件会根据属性isOpen进行操作。

      isOpen={popoverOpen}

isOpen属性使用 true/false 值，因此一旦获取该值，弹出窗口组件将根据用户的操作隐藏或可见。

其他第三方库

在本指南中，您使用了reactstrap，但是还有大量可用的库可以提供各种组件，包括 popover。

材质-UI
引导程序
react-bootstrap
rsuitejs
react-popover
react-tiny
弹出窗口

结论

Reactstrap是将 Bootstrap 与 React 结合使用的流行选择。基本控件之一是弹出窗口，我们可以使用它来显示静态信息以及标题。

弹出窗口是使用特定目标元素周围的 HTML 控件向用户显示信息的一种方式。我希望本指南能帮助您将 Bootstrap 集成到您的 React 应用中。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何使用 React-Bootstrap 的 Popover

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<Button id="mypopover" type="button"> Click to Launch Popover </Button>``` It is a simple button control along with the added property `id`; this is important to specify because soon you'll use the targeted element for the popover. The next step is to implement popover control in the same scope as the button control, as shown below: ```jsx <Popover placement="bottom" isOpen={popoverOpen} target="mypopover" toggle={this.togglePopover} > <PopoverHeader>This is popover title</PopoverHeader> <PopoverBody> This is simple popover content </PopoverBody> </Popover>

import React, { Component } from "react"; import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap"; class SimplePopover extends Component { constructor() { super(); this.state = { name: "React", popoverOpen: false }; this.togglePopover = this.togglePopover.bind(this); } togglePopover() { this.setState({ popoverOpen: !this.state.popoverOpen }) } render() { const { popoverOpen } = this.state; return ( <div> <Button id="mypopover" type="button"> Click to Launch Popover </Button> <Popover placement="bottom" isOpen={popoverOpen} target="mypopover" toggle={this.togglePopover} > <PopoverHeader>This is popover title</PopoverHeader> <PopoverBody> This is simple popover content </PopoverBody> </Popover> </div> ); } } export default SimplePopover;