如何使模态弹出窗口刷新页面上的项目

介绍

模态弹出窗口是管理页面内容和吸引用户关注应用特定功能的绝佳方式。了解如何操作 React Bootstrap 模态弹出窗口并对其进行自定义以满足应用需求非常重要。例如，您可能希望在关闭显示基于用户的电影评分和评论的网站上的评论表单弹出窗口后重新加载页面。可以将获取所有评论的 API 调用置于页面首次加载或挂载到 DOM 时触发的函数下。这样，新评论可以在用户通过表单添加后立即显示给用户。

在本指南中，您将学习在关闭 react-bootstrap 模式时刷新页面的几种方法。

创建一个 React Bootstrap Modal

首先，通过运行以下命令安装react-bootstrap和bootstrap ：

      npm install react-bootstrap bootstrap

使用以下代码在App.js中渲染模态组件：

      import React,{useState,useEffect} from 'react';
import {Modal} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {

   const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  
  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default App;
    

使用 useEffect() 检查页面重新加载

要检查页面重新加载，您可以使用componentDidMount()或useEffect()的等效钩子实现。您可以在其中放置相关的console.log()或警报，以通知您页面重新加载。

在 React 中，这是通过将空数组作为第二个参数传递给useEffect()钩子来完成的。

      useEffect(()=>{
    alert('reload!')
},[])
    

每次您的组件安装在 DOM 上或首次加载到页面上时，您都会收到上述警报。

使用 Props 跟踪 Modal 的退出事件

默认情况下，模态框会以动画形式进入和退出页面。关闭模态框时会触发多个事件。每个事件都是在模态框经历特定阶段变化后触发的。此阶段变化通常是整个动画过程中的过渡阶段。可以通过将特定道具传递给模态框并调用回调函数来访问这些阶段。

您可以访问三个 props：onExit、onExited和onExiting。当模态框开始过渡出页面时，首先触发onExiting()回调，然后当模态框完成过渡时触发onExited()回调。最后触发onExit()回调函数，表示模态框已完全过渡出页面。

另一个 prop 是onHide，当你点击模式的关闭图标或点击模式外背景中的任意位置时，它会触发回调函数。

下面的代码行展示了如何将你自己的回调函数作为 props 传递给 React Bootstrap 的模态组件：

      <Modal show={show} onHide={handleClose} onHide={callback}>

回调中的刷新页面

在App组件或任何父组件内创建一个简单的函数来呈现你的模式。

      const reload=()=>window.location.reload();
    

上述reload()方法通过调用浏览器全局对象（窗口对象）属性（即location对象）的内置 reload 方法强制重新加载页面。

将此方法传递给上一节中讨论的任何退出事件。例如，使用onExit事件：

      <Modal show={show} onHide={handleClose} onExit={reload}>

您可以使用onExited或onExiting事件来获得相同的结果：

      <Modal show={show} onHide={handleClose} onExiting={reload}>

或者，您也可以使用onHide属性来产生相同的效果。

      <Modal show={show} onHide={handleClose} onHide={reload}>

使用上述任何一种方法，您都会得到一个完整的页面来重新加载，并且在关闭模式时会收到一个警报作为验证。

使用 onClick 事件刷新页面

如果您不想向模态组件传递任何其他属性，则可以在handleClose()中调用自定义reload()方法。这是关闭onHide事件调用的模态所需的必需函数。将模态的显示状态设置为 false 后，调用reload()方法。

      const handleClose = () => {
    setShow(false)
    reload();
  };
    

这类似于在onHide事件后触发回调，但提供了一种更简洁的方法来实现相同的结果。

请记住在模式内部的 UI 元素上调用这些方法来关闭模式的onClick事件，例如模式页脚中的关闭按钮。

      <Button variant="secondary" onClick={handleClose}>
    Close
</Button>
    

结论

页面重新加载无法提供良好的用户体验。它们必须始终与必要的操作相结合，例如检索或向服务器发送数据或在后台加载大型资产（如大图像）。为了应对这种糟糕的用户体验，页面重新加载必须始终伴随着旋转器或加载器。本指南中演示的所有方法都同样有效，但在无法访问某些道具的情况下（例如，从模式中删除过渡或动画时），您必须使用自定义事件处理程序。

了解更多

探索 Pluralsight 的 React 和 Bootstrap 课程以继续学习：

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

_查看原文