React项目中删除按钮触发的window.alert弹窗点击外部无法关闭如何解决

问题根因 #

你现在的代码存在两个核心错误：

• 你混淆了window.alert()和window.confirm()的用法：alert()只有确认按钮、没有取消选项，本身返回值永远是undefined，而且浏览器原生alert()本身就不支持点击外部区域关闭，只能点击确定按钮触发关闭
• 你用if(window.alert('xxx'))的判断逻辑完全不生效，因为undefined会被隐式转换为false，所以就算用户点了alert的确定，删除逻辑也不会执行，这也是你觉得只能刷新页面取消操作的原因

修正方案 #

把弹窗替换为支持确认/取消双选项、支持点击外部关闭的方案，这里给你两种可选实现：

方案1：用原生window.confirm()（最简单快速适配） #

原生confirm()会返回布尔值，用户点确定返回true，点取消/部分浏览器支持点击外部区域关闭返回false，完全匹配你的需求，修正后的代码如下：

const deleteHandler = (id) => {
  // 替换alert为confirm
  if (window.confirm('Are you sure you want to delete?')) {
    dispatch(deleteCoin(id));
    alert(`Coin of Lot# ${id} deleted successfully.`);
  }
};

方案2：用React组件库的模态框（自定义程度更高） #

如果是用Ant Design/Element-React这类组件库，可以用内置的确认模态框组件，支持完全自定义样式、按钮文案、关闭逻辑，适配性更强，以Ant Design为例示例代码：

import { Modal, message } from 'antd';

const deleteHandler = (id) => {
  Modal.confirm({
    title: '删除确认',
    content: 'Are you sure you want to delete?',
    onOk: () => {
      dispatch(deleteCoin(id));
      message.success(`Coin of Lot# ${id} deleted successfully.`);
    }
  })
};

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