react函数式组件页面离开时出现弹框

在React中，如果你想要在函数式组件的页面即将离开（例如，用户点击浏览器返回按钮或导航到其他链接）时显示一个弹框，你可以利用`useEffect`钩子以及`onBlur`或`onFocusOut`事件。这里是一个简单的示例：

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const handleWindowBlur = () => {
    setShowModal(true); // 当窗口失去焦点时，展示模态框
  };

  useEffect(() => {
    window.addEventListener('blur', handleWindowBlur);

    return () => {
      window.removeEventListener('blur', handleWindowBlur); // 组件卸载前移除事件监听
    };
  }, []);

  return (
    <>
      {/* 正常的内容 */}
      <div onClick={() => setShowModal(false)} onBlur={handleWindowBlur}>点击关闭提示</div>

      {/* 如果modal应该显示 */}
      {showModal && (
        <div className="modal">
          页面即将离开，请确认操作...
          <button onClick={() => setShowModal(false)}>确定</button>
        </div>
      )}
    </>
  );
};

export default MyComponent;

在这个例子中，当页面失去焦点时（比如用户点击了其他元素或按下了Tab键），会触发`handleWindowBlur`函数并显示模态框。当用户点击“确定”按钮或者再次聚焦页面时，通过清除`onBlur`事件处理函数隐藏模态框。