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

Z时代
2024-01-10
分类：综合

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

示例

首先创建一个 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>
   );
}