React中点击Overlay关闭登录窗口及遮罩层的实现问题

问题原因 #

你已通过App组件的openWindow状态控制登录窗口和Overlay的显示，且给Overlay传递了关闭回调，但可能存在两个核心问题：

• Overlay组件未将接收的onClick绑定到实际DOM元素上
• 点击登录窗口时事件冒泡到Overlay，可能导致误关闭（可选优化）

解决方案 #

1. 修正Overlay组件的事件绑定 #

确保Overlay组件把传入的onClick回调绑定到根DOM节点：

// Overlay.js
import classes from './Overlay.module.css';

const Overlay = (props) => {
  // 将props.onClick绑定到div元素上，触发关闭逻辑
  return <div className={classes.overlay} onClick={props.onClick}></div>;
};

export default Overlay;

2. 阻止登录窗口的事件冒泡（可选优化） #

如果点击登录窗口内部时不想触发Overlay的关闭，需要在Login组件的根元素上阻止事件冒泡：

// Login.js
import classes from './Login.module.css';

const Login = () => {
  return (
    <div 
      className={classes.login} 
      onClick={(e) => e.stopPropagation()} // 阻止事件冒泡到Overlay
    >
      {/* 你的登录表单内容 */}
    </div>
  );
};

export default Login;

3. 验证现有逻辑有效性 #

你的App和Auth组件的核心逻辑是正确的：

• App通过openWindow状态控制Auth的渲染
• Auth将关闭回调传递给Overlay，点击Overlay时触发closeHandler，把openWindow设为false，从而隐藏登录窗口和Overlay

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