要保持React弹出窗口在新的点击事件注册后不消失,可以使用一个状态变量来控制弹出窗口的显示和隐藏。当点击事件触发时,更新状态变量来显示弹出窗口,并在弹出窗口内部注册点击事件,防止其关闭。以下是一个示例代码:
import React, { useState } from 'react';
function PopupWindow() {
const [showPopup, setShowPopup] = useState(false);
const handleButtonClick = () => {
setShowPopup(true);
};
const handlePopupClick = (e) => {
e.stopPropagation(); // 阻止事件冒泡,防止弹出窗口被关闭
// 执行其他逻辑
};
return (
{showPopup && (
这是弹出窗口的内容
)}
);
}
export default PopupWindow;
在上面的代码中,我们使用showPopup状态变量来控制弹出窗口的显示和隐藏。当点击按钮时,handleButtonClick函数会将showPopup设置为true,从而显示弹出窗口。弹出窗口的onClick事件被绑定到handlePopupClick函数,该函数阻止事件冒泡并执行其他逻辑。这样,在点击弹出窗口内部时,弹出窗口不会被关闭。
请根据你的具体需求和UI组件库进行相应的修改和调整。