javascript - 模态reactjs关闭时间
问题描述
我需要我的模态在一定时间后关闭,我该怎么做?这就是我到目前为止所做的
import React from 'react';
import IconcloseModal from './../../assets/icon/icon-cerrar-modal.png';
import './Modal.css'
const Modal = ({ typeModal, textModal, showModal, positionModal, closeModal }) => {
let titleModal = '';
if (typeModal === 'success')
titleModal = '¡Bien hecho!';
else if (typeModal === 'warning')
titleModal = '¡Cuidado!';
return (
<div>
<div className={(showModal) ? 'notify ' + positionModal + ' do-show' : 'notify ' + positionModal}
data-notification-status={typeModal}>
<div className="content-warning">
<h3>{titleModal}</h3>
<p> {textModal}</p>
</div>
<div onClick={closeModal} className="close-alert"><img src={IconcloseModal} alt="Logo cerrar modal" /></div>
</div>
</div>
)
}
export default Modal;
解决方案
您可以为此使用 setTimout 函数。假设这closeModal
是一个功能,您可以像这样实现它。这将在 3 秒后关闭模式。
function close() {
setTimeout(() => closeModal(), 3000)
}
return(
...
<div onClick={close} className="close-alert"><img src={IconcloseModal} alt="Logo cerrar modal" /></div>
...
)
推荐阅读
- c++ - 当静态转换为只移动类型时 Clang 与 GCC
- javascript - 在 map 函数中使用 Promise
- java - 如何使用开关从 sendbroadcast 中清除延迟的未接收传感器数据?
- c# - Entity Framework Core:在“加入”表中添加新条目会删除现有记录
- aem - 将数据传递给 AEM 中的组件
- c# - 使用sqlite内存进行集成测试两个api调用
- c# - 服务器违反了协议。Section=ResponseHeader Detail=CR 后面必须跟 C# Web API 项目中的 LF
- c++ - 将具有可变长度的 C99 静态 3D 数组传递给函数
- python - 如何从 Python Requests/Beautiful Soup 中的某些文本参数中获取特定的 HTML 行
- dictionary - Smalltalk,从计数器字典中增加一个值