react-modal组件内部绑定的closeModal关闭函数不生效如何解决？

问题根因 #

你遇到的问题是事件冒泡导致的逻辑冲突：
你的Modal组件被包裹在绑定了onClick={openModal}的外层.card div内部，点击弹窗内的关闭按钮时，点击事件会逐层向上传递：

• 首先触发关闭按钮绑定的closeModal，将modalState设为false
• 事件继续冒泡到外层的.card div，触发openModal，又把modalState改回true
  所以最终弹窗看起来没有关闭。

修复方案 #

修改closeModal函数，阻止点击事件向上冒泡即可：

const closeModal = (e) => {
    // 阻止事件冒泡到外层.card元素
    e.stopPropagation();
    setModalState(false);
}

如果后续弹窗内的其他可点击元素也出现类似异常，给对应的点击事件回调加上e.stopPropagation()即可。

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