React中点击Backdrop组件未触发setShowModal、Modal无法关闭问题

自定义组件Backdrop接收的onClick是普通prop，React不会自动将其绑定到组件内部的原生DOM节点上，因此点击Backdrop时不会触发传入的closeModalHandler，自然不会打印日志、也不会更新状态。

方案1：修改Backdrop组件内部逻辑（推荐） #

在Backdrop组件中接收onClick参数，绑定到内部根DOM节点即可，示例：

// ./Backdrop.jsx
export default function Backdrop({ onClick }) {
  // 其他逻辑不变，给根div加上onClick绑定
  return <div className="backdrop" onClick={onClick}>
    {/* 原有内部内容 */}
  </div>
}

方案2：外层包裹原生DOM绑定事件 #

如果不方便修改Backdrop组件，可在Todo组件中给Backdrop外层套一个原生div绑定点击事件：

// Todo组件return部分修改对应代码
{showModal && <div onClick={closeModalHandler}><Backdrop /></div>}

• 检查Modal组件的z-index是否高于Backdrop，且Modal尺寸占满全屏，导致实际点击区域为Modal而非Backdrop，可临时给Backdrop加z-index: 999样式验证
• 检查Backdrop组件内部是否调用了e.stopPropagation()阻止事件冒泡，该逻辑会导致外部绑定的点击事件失效

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