在React + Redux应用程序中关闭单击外部的模式窗口可以通过以下步骤实现:
下面是一个示例代码:
import React, { useState, useRef, useEffect } from 'react';
const Modal = () => {
const [showModal, setShowModal] = useState(false);
const modalRef = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
if (modalRef.current && !modalRef.current.contains(event.target)) {
setShowModal(false);
}
};
document.addEventListener('click', handleClickOutside);
return () => {
document.removeEventListener('click', handleClickOutside);
};
}, []);
return (
<div>
<button onClick={() => setShowModal(true)}>Open Modal</button>
{showModal && (
<div ref={modalRef}>
{/* Modal content */}
<h1>Modal Window</h1>
<p>This is a modal window.</p>
</div>
)}
</div>
);
};
export default Modal;
在上述示例中,点击"Open Modal"按钮可以打开模式窗口,点击模式窗口外部区域可以关闭模式窗口。模式窗口的显示状态由showModal
状态变量控制。通过ref获取模式窗口的DOM元素,并在点击事件处理程序中判断目标元素是否在模式窗口内部,从而决定是否关闭模式窗口。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云