React Semantic UI 独立组件Modal的closeIcon无法关闭弹窗如何解决

问题原因 #

你的代码存在事件冒泡冲突，是导致关闭图标失效的核心原因：
你给整个<Card>组件绑定了onClick事件用于打开弹窗，而Modal默认渲染在Card组件内部。点击关闭图标时，事件执行顺序如下：

1. 关闭图标触发Modal的onClose回调，执行setShowModal(false)将弹窗状态改为关闭
2. 点击事件向上冒泡到外层Card节点，触发Card的onClick回调，执行setShowModal(true)将弹窗状态重新改为打开
   两次状态更新连续执行，视觉上就表现为关闭按钮没有生效。

解决方案 #

你可以任选以下一种方法修复：

方案1：阻止关闭事件冒泡 #

修改子组件的关闭逻辑，阻止点击事件向上传递：

import { Modal } from "semantic-ui-react";

const BookModal = props => {
  const handleClose = (e) => {
    e.stopPropagation();
    props.onClose();
  }
  return ( 
    <Modal
      closeIcon
      onClose={handleClose}
      open={props.open} 
    >
      <Modal.Header>
        <h2>Modal content</h2>
      </Modal.Header>
    </Modal>
  );
}

export default BookModal;

方案2：把Modal渲染到Card外层 #

给Modal添加portal属性，让它直接渲染在body节点下，脱离Card的DOM结构，就不会触发Card的点击事件：

<Modal
  closeIcon
  onClose={props.onClose}
  open={props.open}
  portal={true}
>

方案3：调整打开事件绑定范围 #

不要把打开弹窗的onClick事件绑定在整个Card上，只绑定到你需要点击触发弹窗的区域，比如卡片封面、标题区域，避免Modal被包裹在绑定了点击事件的元素内部。

内容的提问来源于stack exchange，提问作者Natharel