React JS中弹窗组件（Model）无法关闭问题求助

问题根源 #

弹窗无法关闭是因为事件冒泡：Model组件嵌套在带有onClick事件的hotel-container_groupA容器内，点击Close按钮时，点击事件会向上冒泡到外层容器，触发handleToggleModel(auli)，导致showModel被重新设置为auli，弹窗刚关闭就又被打开了。

解决方案 #

方案1：在Close按钮点击事件中阻止冒泡 #

修改Model组件的按钮逻辑，添加事件对象并阻止冒泡传递：

const Model = ({ children, onClose }) => {
  const handleClose = (e) => {
    e.stopPropagation(); // 阻止事件向上冒泡
    onClose();
  };

  return (
    <div className='model'>
      <div className='model-content'>
        {children}
        <button onClick={handleClose}>Close</button>
      </div>
    </div>
  )
}

方案2：将弹窗移到外层点击区域之外 #

把Model组件从hotel-container_groupA容器中移出，彻底避免外层点击事件的影响：

function Places() {
  const [showModel, setShowModel] = useState(null)

  const handleToggleModel = (value) => {
    setShowModel(value)
  }

  return (
    <div className='hotel-container'>
      <div
        className='hotel-container_groupA'
        onClick={() => handleToggleModel(auli)}
      >
        <Article imgUrl={auli} date='Sep 26, 2021' text='Aoli' />
      </div>
      {/* 将弹窗移至外层容器下，脱离原点击触发区域 */}
      {showModel === auli && (
        <Model onClose={() => handleToggleModel(null)}>
          <div>
            <img src={auli} alt='#' />
          </div>
        </Model>
      )}
    </div>
  )
}

补充说明 #

如果auli是对象/数组类型，showModel === auli的全等判断可能存在隐问题（引用类型比较的是内存地址），这种情况下建议改用字符串ID等基础类型作为状态值，进一步避免逻辑错误。

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