如何在点击外部时关闭 React-Bootstrap 弹出窗口

介绍

React 社区一直致力于让开发人员轻松集成开源库。它通过将这些组件转换为 React 组件，消除了对 Bootstrap 组件（如工具提示、弹出窗口、模态框等）不必要的 jQuery 使用。弹出窗口被广泛用于在页面上以增强的视觉效果显示一些附加内容。本指南探讨了如何在单击页面上的任何位置时关闭弹出窗口。

弹出窗口

弹出窗口有多种使用方式，例如在电子商务 Web 应用中计算库存商品的价格、显示新车型的详细信息等。但是，在使用 UI 组件时，请确保用户端可以方便地处理它。有吸引力的 UI 元素似乎易于使用，但在用代码实现之前，应该正确预测它们的完整用例。任何模式、工具提示或弹出窗口都应具有的基本功能是易于打开和关闭。由于弹出窗口是通过按钮使用点击事件触发的，因此关闭相同的弹出窗口在最终用户体验方面应该更加个性化。

React Bootstrap 弹出窗口的默认关闭操作与触发它的按钮相同。单击时打开弹出窗口的按钮的作用类似于切换按钮。但是，由于界面相似，用户希望弹出窗口在他们单击页面外的任意位置时关闭，就像模态窗口一样。

设置弹出窗口

创建项目

确保您的机器上安装了 Nodejs 和 npm（至少版本 8 或更高版本）以及代码编辑器和 Web 浏览器（最好是 Chrome 或 Firefox）。

使用 create-react-app 创建一个新项目：

      npx create-react-app react-bootstrap-popover

安装 React Bootstrap

在根目录中运行以下命令来安装 React Bootstrap 库

      npm install react-bootstrap bootstrap

这将在项目内安装 Bootstrap 和 React Bootstrap。

清理模板

为了简洁起见，我们将所有代码放在App.js中。从App.js中删除徽标、App.css 及其所有导入。清除 App 组件内的入门模板。您的App.js应如下所示。

      import React from 'react';

function App() {
  return (
    <div className="App">
      <h2>Hello</h2>
    </div>
  );
}

export default App;
    

添加 Popover 组件

为了使常规 Bootstrap 样式正常工作，请导入顶部的 Bootstrap 样式。

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

以上相当于在index.html文件中添加 Bootstrap CDN。现在从react-bootstrap导入三个东西：Popover、OverlayTrigger 和 Button

      import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
    

要在 Popover 组件内创建弹出窗口，请渲染Popover.Title组件以指示弹出窗口的标题，并渲染Popover.Content组件以指示其内容。将此弹出窗口存储在常量变量中，并将其输出到 JSX 模板中。

      ...
 const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );
...
    

在覆盖层内输出弹出窗口并使用触发器属性设置覆盖层监听的事件类型。

      ....
 return (
    <div className="App">
    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
    </div>
  );
....
    

最后，渲染 bootstrap 弹出窗口的App.js应该如下所示。你可以从此处的react-bootstrap 官方文档中找到相同的代码。

      import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';


function App() {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );
  
 
  return (
    <div className="App">
    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
    </div>
  );
}

export default App;
    

要查看根目录内的弹出窗口，请运行以下命令：

      npm start

这将启动本地开发服务器（通常在端口 3000 上），单击按钮时，您可以看到弹出窗口按钮和弹出窗口本身。再次单击同一按钮将关闭弹出窗口。

点击外部弹出窗口时关闭

让我们看一下关闭弹出窗口的两种最简单的方法。

使用 rootClose Prop

您可以将附加 prop rootClose传递给OverlayTrigger组件，以在外部点击时关闭弹出窗口。

      ...
    <OverlayTrigger trigger="click" rootClose placement="right" overlay={popover}>
...
    

如果没有此 prop，父组件默认采用 false 布尔值。传递此 prop 时，该值将设置为 true，并且当用户点击覆盖层外部时将触发onHide方法。onHide方法只是覆盖层希望隐藏时调用的回调，如果指定了rootClose ，则该方法是必需的。

使用焦点触发器关闭弹出窗口

另一种关闭弹出窗口的方法是使用不同的触发事件。您可以使用悬停或焦点触发器而不是点击触发器来实现这一点。悬停触发器不是正确的解决方案，因为它会删除弹出窗口上的点击操作，并将其呈现为工具提示。请改用焦点触发器。

      ...
<OverlayTrigger trigger="focus" placement="right" overlay={popover}>
...
    

当用户点击弹出窗口外部时，弹出窗口将会关闭。

如果您收到任何警告或错误，您可以通过更新package.json文件并运行命令npm i来使用 react-bootstrap 的精确版本作为本指南。

      ....
"bootstrap": "^4.4.1",
"react-bootstrap": "^1.0.1",
....
    

结论

使用有吸引力的 UI 元素可以增强应用的外观并使设计更具吸引力。但是，在使用任何 UI 元素时，您必须确保为最终用户提供一定的灵活性。外行人希望弹出窗口像任何弹出窗口一样工作，因此如果默认库未实现任何类似的功能，则应实现它们。使用 rootClose 属性是最安全、最干净和最准确的方法，而使用与单击不同的触发器可能会导致应用不一致。悬停和焦点触发器都无法在移动设备（如手机和平板电脑）上很好地处理。当您的应用不适合移动设备时，请使用第二种方法。

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

_查看原文