React 模态框无法关闭，通常是因为点击关闭按钮时事件冒泡触发了父元素的 onClick（如打开模态框的监听器），导致 setShowModal(true) 紧随 setShowModal(false) 执行，视觉上“未关闭”。根本解法是阻止事件冒泡，而非依赖 setTimeout。
react 模态框无法关闭，通常是因为点击关闭按钮时事件冒泡触发了父元素的 `onclick`（如打开模态框的监听器），导致 `setshowmodal(true)` 紧随 `setshowmodal(false)` 执行，视觉上“未关闭”。根本解法是阻止事件冒泡，而非依赖 `settimeout`。
在你的 TransactionItem 组件中，整个交易项包裹在一个带有 onClick={() => setShowModal(true)} 的 <div> 内：<pre class="brush:php;toolbar:false;"><div classname="{c.transaction_item}" onclick="{()"> setShowModal(true)}>
{/* ... */}
{showModal && createPortal(
<modal onclose="{handleClose}" date="23.05.2024 в 09:41"></modal>,
modalRoot
)}
</div></pre>
<p>这意味着：<strong>只要用户在模态框内任意位置点击（包括关闭按钮），该点击事件会先触发 Modal 内部的 <code>onClose，再向上冒泡到外层 transaction_item，从而再次执行 setShowModal(true) —— 最终状态被重置为 true，模态框“闪退后立即重开”。
而 setTimeout(() => setShowModal(false), 0) 能生效，是因为它将状态更新推迟到当前事件循环末尾，此时冒泡已结束，setShowModal(true) 不再被触发，因此关闭成功。但这属于副作用规避，不是健壮方案。
✅ 正确做法：在 Modal 内部所有可交互的关闭触发点（如关闭按钮、遮罩层、ESC 键等）显式调用 e.stopPropagation()，切断冒泡链。
例如，在 Modal.jsx 中，确保关闭逻辑绑定的事件处理器阻止冒泡：
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
// Modal.jsx（关键修改）
const Modal = ({ onClose, date, ...props }) => {
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) { // 点击遮罩层本身
e.stopPropagation(); // ? 关键：阻止冒泡至外层 transaction_item
onClose();
}
};
const handleCloseClick = (e) => {
e.stopPropagation(); // ? 同样适用于关闭按钮
onClose();
};
return createPortal(
<div classname="{c.modalOverlay}" onclick="{handleBackdropClick}">
<div classname="{c.modalContent}">
<button classname="{c.closeBtn}" onclick="{handleCloseClick}">✕</button>
<div classname="{c.modalBody}">
<p>Дата: {date}</p>
{/* 其他 props 渲染内容 */}
</div>
</div>
</div>,
document.body // 推荐挂载到 body，而非 #root > div，更语义化且避免布局干扰
);
};
export default Modal;
⚠️ 注意事项：
-
不要滥用
event.preventDefault()：它用于阻止默认行为（如表单提交），此处只需stopPropagation()。 -
检查所有关闭入口：包括 ESC 键监听（
useEffect中添加keydown监听器时也需e.stopPropagation()或条件过滤）、X 按钮、确认/取消按钮等。 -
挂载目标建议优化：
document.querySelector('#root > div')容易因 DOM 结构变动失效；推荐使用document.body或创建专用 portal 容器（如<div id="modal-root"></div>），更稳定且符合最佳实践。 -
可选增强体验：添加
onKeyDown支持 ESC 关闭，并同样处理冒泡：
useEffect(() => {
const handleEsc = (e) => {
if (e.key === 'Escape') {
e.stopPropagation(); // 防止 ESC 触发外层 click
onClose();
}
};
window.addEventListener('keydown', handleEsc);
return () => window.removeEventListener('keydown', handleEsc);
}, [onClose]);
总结：React 中模态框关闭失败，90% 源于事件冒泡干扰。通过精准调用 e.stopPropagation() 隔离模态框交互事件，即可彻底替代 setTimeout 这类临时补丁，写出可维护、符合 React 数据流规范的代码。
