在 React 中使用 Bootstrap 的 Modals

2019-11-26 08:00:00 · 飞浪

介绍模态框在前端应用程序中非常常见。React-bootstrap使用React组件重建了基于jQuery的模态框，这些组件提供与jQuery对应部分相同的功能。在本指南中，我将向您展

介绍

模态框在前端应用程序中非常常见。React-bootstrap 使用 React 组件重建了基于 jQuery 的模态框，这些组件提供与 jQuery 对应部分相同的功能。在本指南中，我将向您展示如何安装 react-bootstrap、显示和隐藏模态框、使用不同的模态框事件以及使用 React 中的 Bootstrap 模态框根据您的需要自定义模态框。让我们开始吧。

安装 React-Bootstrap

要开始在 React 应用程序中使用 Bootstrap，您需要从npm安装react-bootstrap包以及bootstrap v4 包。您需要为 CSS 安装常规 Bootstrap。

      yarn add react-bootstrap bootstrap
# or
npm i react-bootstrap bootstrap
    

安装完成后，您可以将模态组件和样式导入到您的模块中。

      import Modal from "react-bootstrap/Modal";
import "bootstrap/dist/css/bootstrap.min.css";
    

模态框有几个基本部分：Header、Title、Body和Footer。这些部分将保存我们需要显示的内容。下面是使用这些组件显示基本模态框的示例。

      import Modal from "react-bootstrap/Modal";
import "bootstrap/dist/css/bootstrap.min.css";

const App = () => {
  return (
    <Modal show={true}>
      <Modal.Header>Hi</Modal.Header>
      <Modal.Body>asdfasdf</Modal.Body>
      <Modal.Footer>This is the footer</Modal.Footer>
    </Modal>
  );
};
    

使用Modal.<component>语法显示每个组件。如果您不想在定义模态框时使用对象文字语法，也可以单独导入每个组件。

      import React from "react";
import ReactDOM from "react-dom";
import Modal from "react-bootstrap/Modal";
import ModalBody from "react-bootstrap/ModalBody";
import ModalHeader from "react-bootstrap/ModalHeader";
import ModalFooter from "react-bootstrap/ModalFooter";
import ModalTitle from "react-bootstrap/ModalTitle";

const App = () => {
  return (
    <Modal show={true}>
      <ModalHeader>
        <ModalTitle>Hi</ModalTitle>
      </ModalHeader>
      <ModalBody>asdfasdf</ModalBody>
      <ModalFooter>This is the footer</ModalFooter>
    </Modal>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
    

现在您的应用程序中已经有了一个功能模式，让我们让该模式具有交互性。

隐藏/显示模式

我们之前的示例展示了如何使用模态组件上的show属性显示模态。我最初将值硬编码为true，但它不太灵活。为了改进这一点，让我们将值设置为变量或可切换的表达式。我们还将创建一个按钮来切换可见性。

      const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const showModal = () => {
    setIsOpen(true);
  };

  const hideModal = () => {
    setIsOpen(false);
  };

  return (
    <>
      <button onClick={showModal}>Display Modal</button>
      <Modal show={isOpen} onHide={hideModal}>
        <Modal.Header>
          <Modal.Title>Hi</Modal.Title>
        </Modal.Header>
        <Modal.Body>The body</Modal.Body>
        <Modal.Footer>
          <button onClick={hideModal}>Cancel</button>
          <button>Save</button>
        </Modal.Footer>
      </Modal>
    </>
  );
};
    

我添加了showModal和hideModal方法来更新名为isOpen的状态属性。将isOpen变量作为show属性的值赋值意味着我们现在可以控制是否显示模态框。如果我们想在点击非静态背景或按下esc 键时隐藏模态框，则需要使用新的onHide属性。我还在页脚中添加了几个按钮，以使此模态框更加逼真。除了通过按下“Esc”键或点击背景来隐藏模态框外，我还将hideModal方法放在取消按钮上，以显示隐藏模态框的另一种方式。

模态事件

模态框带有一些有用的事件，可帮助我们处理隐藏和显示模态框之间的中间状态。例如，如果您想在模态框中、在加载到视图中的主页上或在隐藏过程中显示不同的内容，则可以分别使用onEnter、onEntered、onExit或onExited回调。让我们更深入地分别了解这些回调。

进入

onEntered事件接受一个回调，该回调将在模态框进入视图后触发。如果我们想异步将数据加载到模态框中，或者在元素在模态框中可见时与其交互，这将非常有用。在此示例中，让我们将模态框的标题从Transitioning...更新为Modal Ready。

      const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [title, setTitle] = React.useState("Transitioning...");

  const showModal = () => {
    setIsOpen(true);
  };

  const hideModal = () => {
    setIsOpen(false);
    setTitle("Transitioning...");
  };

  const modalLoaded = () => {
    setTitle("Modal Ready");
  };

  return (
    <>
      <button onClick={showModal}>Display Modal</button>
      <Modal show={isOpen} onHide={hideModal} onEntered={modalLoaded}>
        <Modal.Header>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>The body</Modal.Body>
        <Modal.Footer>
          <button onClick={hideModal}>Cancel</button>
          <button>Save</button>
        </Modal.Footer>
      </Modal>
    </>
  );
};
    

进入

在此示例中，我们将启动一个计时器，以毫秒为单位计算打开模态框所需的时间。我们将在模态框的主体中显示 onEnter回调获取开始打开模态框的命令到完成打开模态框所需的时间。

      const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [timer, setTimer] = React.useState(0);
  const [startTime, setStartTime] = React.useState(0);
  const [endTime, setEndTime] = React.useState(0);

  const showModal = () => {
    setIsOpen(true);
  };

  const hideModal = () => {
    setIsOpen(false);
    setTitle("Transitioning...");
  };

  const startTimer = () => {
    setStartTime(Date.now());
  };

  const modalLoaded = () => {
    setEndTime(Date.now());
  };

  return (
    <>
      <button onClick={showModal}>Display Modal</button>
      <Modal
        show={isOpen}
        onHide={hideModal}
        onEnter={startTimer}
        onEntered={modalLoaded}
      >
        <Modal.Header>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{endTime - startTime} ms</Modal.Body>
        <Modal.Footer>
          <button onClick={hideModal}>Cancel</button>
          <button>Save</button>
        </Modal.Footer>
      </Modal>
    </>
  );
};
    

onExit 和 onExited

我们可以类似地利用onExit和onExited回调来处理转换期间的页面交互。当用户关闭模态框时，让我们显示“再见”消息。我们还会在模态框退出后更改页面背景。

      const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [timer, setTimer] = React.useState(0);
  const [startTime, setStartTime] = React.useState(0);
  const [endTime, setEndTime] = React.useState(0);

  const showModal = () => {
    setIsOpen(true);
    setTitle("Modal Ready");
    document.body.style.backgroundColor = "white";
  };

  const hideModal = () => {
    setIsOpen(false);
  };

  const startTimer = () => {
    setStartTime(Date.now());
  };

  const modalLoaded = () => {
    setEndTime(Date.now());
  };

  const onExit = () => {
    setTitle("Goodbye 😀");
  };

  const onExited = () => {
    document.body.style.backgroundColor = "green";
  };

  return (
    <>
      <button onClick={showModal}>Display Modal</button>
      <Modal
        show={isOpen}
        onHide={hideModal}
        onEnter={startTimer}
        onEntered={modalLoaded}
        onExit={onExit}
        onExited={onExited}
      >
        <Modal.Header>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{endTime - startTime} ms</Modal.Body>
        <Modal.Footer>
          <button onClick={hideModal}>Cancel</button>
          <button>Save</button>
        </Modal.Footer>
      </Modal>
    </>
  );
};
    

自定义模态框

让模态框与您的品牌和设计相匹配很简单。使用适用于任何 React 组件的相同方法来设置模态框的样式，包括任何 CSS-in-js 解决方案、标准 CSS 和 CSS 模块。如果您需要向模态框添加类，请使用dialogClassName属性。

      const App = () => {
  return (
    <Modal show={true} dialogClassName={"primaryModal"}>
      <ModalHeader>
        <ModalTitle>Hi</ModalTitle>
      </ModalHeader>
      <ModalBody>asdfasdf</ModalBody>
      <ModalFooter>This is the footer</ModalFooter>
    </Modal>
  );
};
    

<div class="rich-text-editor text aem-GridColumn--tablet--12 aem-GridColumn--phone--12 aem-GridColumn aem-GridColumn--d

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

_查看原文

技术指南

React框架

阅读全文

在 React 中使用 Bootstrap 的 Modals

杭州电子商务研究院

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

import Modal from "react-bootstrap/Modal"; import "bootstrap/dist/css/bootstrap.min.css"; const App = () => { return ( <Modal show={true}> <Modal.Header>Hi</Modal.Header> <Modal.Body>asdfasdf</Modal.Body> <Modal.Footer>This is the footer</Modal.Footer> </Modal> ); };

import React from "react"; import ReactDOM from "react-dom"; import Modal from "react-bootstrap/Modal"; import ModalBody from "react-bootstrap/ModalBody"; import ModalHeader from "react-bootstrap/ModalHeader"; import ModalFooter from "react-bootstrap/ModalFooter"; import ModalTitle from "react-bootstrap/ModalTitle"; const App = () => { return ( <Modal show={true}> <ModalHeader> <ModalTitle>Hi</ModalTitle> </ModalHeader> <ModalBody>asdfasdf</ModalBody> <ModalFooter>This is the footer</ModalFooter> </Modal> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

const App = () => { const [isOpen, setIsOpen] = React.useState(false); const showModal = () => { setIsOpen(true); }; const hideModal = () => { setIsOpen(false); }; return ( <> <button onClick={showModal}>Display Modal</button> <Modal show={isOpen} onHide={hideModal}> <Modal.Header> <Modal.Title>Hi</Modal.Title> </Modal.Header> <Modal.Body>The body</Modal.Body> <Modal.Footer> <button onClick={hideModal}>Cancel</button> <button>Save</button> </Modal.Footer> </Modal> </> ); };

const App = () => { return ( <Modal show={true} dialogClassName={"primaryModal"}> <ModalHeader> <ModalTitle>Hi</ModalTitle> </ModalHeader> <ModalBody>asdfasdf</ModalBody> <ModalFooter>This is the footer</ModalFooter> </Modal> ); };