在 React JS 中创建可自定义的模态框

react jsjavascript libraryfront end technology更新于 2025/11/19 8:12:17

在本文中，我们将了解如何在 React JS 中创建带有多个按钮的可自定义模态框，该模态框可用于多种类型的项目，例如登录页面或旅游网站。模态框是显示在屏幕顶部的消息框。我们可以将模态框用作订阅框;我们还可以使用 CSS 为模态框添加动画。

示例

首先创建一个 React 项目 −

npx create-react-app tutorialpurpose

转到项目目录 −

cd tutorialpurpose

下载并安装 react-modal 包 −

npm i --save react-modal

我们可以使用此包在任何 React 项目中添加简单的预制模态框。它还允许您添加默认样式。

在 App.js 中添加以下代码行 −

import React from "react";
import Modal from "react-modal";

const customStyles = {
   content: {
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",
   },
};

export default function App() {
   let subtitle;
   const [modalIsOpen, setIsOpen] = React.useState(false);
   function openModal() {
      //此函数用于设置点击打开时的操作
      setIsOpen(true);
   }

   function afterOpenModal() {
      // 引用现已同步，可以访问。
      subtitle.style.color = "#f00";
   }
   function closeModal() {
      //此函数用于设置点击关闭时的操作
      setIsOpen(false);
   }

   return (
      <div>
         <button onClick={openModal}>Open Modal</button>
         <Modal
          isOpen={modalIsOpen} //如果模态框已打开
          onAfterOpen={afterOpenModal} //模态框打开后执行的操作
          onRequestClose={closeModal} //模态框关闭后执行的操作
            style={customStyles}
            contentLabel="Example Modal">

            <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
            <button onClick={closeModal}>close</button>
            <div>I am a modal</div>
            <form>
               <input />
               <button>tab navigation</button>
               <button>stays</button>
               <button>inside</button>
               <button>the modal</button>
            </form>
         </Modal>
      </div>
   );
}