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

在本文中，我们将了解如何在 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>
   );
}

解释

这个概念很简单。单击按钮时，状态更改为true，当它为true时，模式打开。在模态框上，有一个按钮，单击该按钮会将状态更改为false并关闭模态框。

我们还在模态框上添加了简单的样式和一组按钮，用于不同的功能。

输出结果

在执行时，它将产生以下输出 -