React中阻止点击ESC按钮关闭弹窗的实现方案

问题背景 #

React项目中EftConsentDialog弹窗当前点击ESC按钮会触发handleEftClose函数，将showEftConsent状态设为false导致弹窗关闭。需求是实现ESC键点击时弹窗不关闭，同时保留closeEftSuccessDialog等场景下的正常关闭逻辑。

相关代码片段：

• 状态管理：

  const [state, setState] = useState({showEftConsent: false,});
  

• 关闭处理函数：

  const handleEftClose = () => { setState({ ...state, showEftConsent: false }); handleCloseWithoutDismiss(); };
  

• 弹窗调用：

  <EftConsentDialog isOpen={state.showEftConsent} handleClose={() => handleEftClose()} disableBackdropClick={true} {...props} />
  

可行实现方案 #

方案一：利用底层弹窗组件的禁用ESC属性（推荐）

由于EftConsentDialog嵌套使用ContentDialog，多数UI组件库的弹窗组件都提供了禁用ESC键关闭的配置项。

1. 打开EftConsentDialog的内部实现代码，找到嵌套的ContentDialog组件
2. 给ContentDialog添加禁用ESC关闭的属性，示例：

   // EftConsentDialog内部代码片段
   <ContentDialog
     isOpen={isOpen}
     handleClose={handleClose}
     disableEscapeKeyDown={true} // 添加此属性，阻止ESC触发关闭
     disableBackdropClick={disableBackdropClick}
     {...props}
   />
   

3. 配置完成后，ESC键不会触发handleClose，也就不会调用handleEftClose关闭弹窗；而closeEftSuccessDialog等主动调用handleEftClose的场景依然能正常关闭弹窗。

方案二：父组件监听键盘事件拦截ESC

如果EftConsentDialog没有暴露禁用ESC的属性，可在父组件中通过事件监听拦截ESC键的行为：

1. 在父组件中添加useEffect监听全局键盘事件，仅在弹窗打开时生效：

   import { useEffect } from 'react';
   
   // ... 其他代码
   
   useEffect(() => {
     const blockEsc = (e) => {
       if (state.showEftConsent && e.key === 'Escape') {
         e.preventDefault();
         e.stopPropagation();
       }
     };
     window.addEventListener('keydown', blockEsc);
     // 组件卸载或弹窗关闭时移除监听
     return () => window.removeEventListener('keydown', blockEsc);
   }, [state.showEftConsent]);
   

2. 此逻辑会在弹窗打开时，阻止ESC键的默认行为和事件冒泡，避免触发弹窗的关闭逻辑；主动调用handleEftClose的场景不受影响。

验证 #

完成配置后，测试以下两种场景：

• 按下ESC键：弹窗保持打开状态
• 触发closeEftSuccessDialog等逻辑：弹窗正常关闭

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