内容简介:本文译自:可通过事件控制的模态组件。要使用该组件,只导入一次
本文译自: 30-seconds-of-react 。 React 30 秒速学: 精选有用的 React 片段,30-seconds-of-react 的中文版本,已全部完成翻译、上线,地址: 30-seconds-of-react-zh_CN-umi 。
可通过事件控制的模态组件。
要使用该组件,只导入一次 Modal
,然后通过将一个布尔值传递给 isVisible
属性来显示它。
- 使用对象解构来设置模态组件的某些属性的默认值。
-
定义
keydownHandler
方法,用于处理所有键盘事件,可以根据你的需要使用它来调度动作(例如,当按下 Esc 时关闭模态)。 *使用React.useEffect()
hook来添加或删除keydown
事件监听器,它调用keydownHandler
。 *使用isVisible
道具来确定是否应该显示模态。 *使用CSS来设置和定位模态组件。
样式:
.modal { position: fixed; top: 0; bottom: 0; left: 0; right:0; width: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.25); animation-name: appear; animation-duration: 300ms; } .modal-dialog{ width: 100%; max-width: 550px; background: white; position: relative; margin: 0 20px; max-height: calc(100vh - 40px); text-align: left; display: flex; flex-direction: column; overflow:hidden; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: slide-in; animation-duration: 0.5s; } .modal-header,.modal-footer{ display: flex; align-items: center; padding: 1rem; } .modal-header{ border-bottom: 1px solid #dbdbdb; justify-content: space-between; } .modal-footer{ border-top: 1px solid #dbdbdb; justify-content: flex-end; } .modal-close{ cursor: pointer; padding: 1rem; margin: -1rem -1rem -1rem auto; } .modal-body{ overflow: auto; } .modal-content{ padding: 1rem; } @keyframes appear { from {opacity: 0;} to {opacity: 1;} } @keyframes slide-in { from {transform: translateY(-150px);} to { transform: translateY(0);} } 复制代码
组件:
import React from "react"; import styles from "./Modal.css"; function Modal({ isVisible = false, title, content, footer, onClose }) { React.useEffect(() => { // 监听事件 document.addEventListener("keydown", keydownHandler); // 取消监听 return () => document.removeEventListener("keydown", keydownHandler); }); function keydownHandler({ key }) { // esc 键,关闭模态框 switch (key) { case "Escape": onClose(); break; default: } } // 控制模态框显示 return !isVisible ? null : ( <div className={styles["modal"]} onClick={onClose}> <div className={styles["modal-dialog"]} onClick={e => e.stopPropagation()} > <div className={styles["modal-header"]}> <h3 className={styles["modal-title"]}>{title}</h3> <span className={styles["modal-close"]} onClick={onClose}> × </span> </div> <div className={styles["modal-body"]}> <div className={styles["modal-content"]}>{content}</div> </div> {footer && <div className={styles["modal-footer"]}>{footer}</div>} </div> </div> ); } 复制代码
例子
// 将组件添加到 render 函数 function App() { const [isModal, setModal] = React.useState(false); return ( <React.Fragment> {/* 按钮显示模态框 */} <button onClick={() => setModal(true)}>显示模态框</button> <Modal isVisible={isModal} title="标题" content={<p>正文</p>} footer={<button onClick={() => setModal(false)}>关闭模态框</button>} onClose={() => setModal(false)} /> </React.Fragment> ); } export default function() { return <App />; } 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 使用HTML5原生对话框元素,轻松创建模态框组件
- 如何使用JavaScript构建模态框插件
- 自定义带动画效果的模态框
- Angluar-模态视图构建简析(A)
- BERT在多模态领域中的应用
- 使用React手写一个对话框或模态框
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Beautiful Code
Greg Wilson、Andy Oram / O'Reilly Media / 2007-7-6 / GBP 35.99
In this unique work, leading computer scientists discuss how they found unusual, carefully designed solutions to difficult problems. This book lets the reader look over the shoulder of major coding an......一起来看看 《Beautiful Code》 这本书的介绍吧!