当前位置：首页 > React

react如何做弹窗

2026-01-24 11:05:52React

使用 React 创建弹窗的方法

使用 React 内置状态管理

通过 React 的 useState 钩子控制弹窗的显示与隐藏，结合条件渲染实现弹窗效果。

react如何做弹窗

import { useState } from 'react';

function PopupExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹窗</button>

      {isOpen && (
        <div className="popup-overlay">
          <div className="popup-content">
            <h3>弹窗标题</h3>
            <p>弹窗内容...</p>
            <button onClick={() => setIsOpen(false)}>关闭</button>
          </div>
        </div>
      )}
    </div>
  );
}

使用 CSS 样式增强视觉效果

为弹窗添加遮罩层和动画效果，提升用户体验。

react如何做弹窗

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

使用第三方库实现高级功能

对于更复杂的需求，可以考虑使用成熟的弹窗组件库：

React Modal
```
npm install react-modal
```

import ReactModal from 'react-modal';

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>打开弹窗</button>

      <ReactModal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="示例弹窗"
      >
        <h3>弹窗标题</h3>
        <p>使用React Modal创建的弹窗</p>
        <button onClick={() => setIsOpen(false)}>关闭</button>
      </ReactModal>
    </>
  );
}

Material-UI Dialog
```
npm install @mui/material
```

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

function MuiDialogExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="contained" onClick={() => setOpen(true)}>
        打开弹窗
      </Button>

      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>弹窗标题</DialogTitle>
        <DialogContent>
          <p>使用Material-UI创建的弹窗</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)}>关闭</Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

实现可复用弹窗组件

创建自定义弹窗组件，提高代码复用性。

function CustomPopup({ isOpen, onClose, title, children }) {
  if (!isOpen) return null;

  return (
    <div className="popup-overlay">
      <div className="popup-content">
        <div className="popup-header">
          <h3>{title}</h3>
          <button onClick={onClose}>&times;</button>
        </div>
        <div className="popup-body">
          {children}
        </div>
      </div>
    </div>
  );
}

// 使用示例
function App() {
  const [showPopup, setShowPopup] = useState(false);

  return (
    <div>
      <button onClick={() => setShowPopup(true)}>显示弹窗</button>

      <CustomPopup 
        isOpen={showPopup}
        onClose={() => setShowPopup(false)}
        title="自定义弹窗"
      >
        <p>这是一个可复用的弹窗组件</p>
      </CustomPopup>
    </div>
  );
}

处理弹窗交互最佳实践

添加 ESC 键关闭功能
实现点击遮罩层关闭
管理焦点以提升可访问性
添加适当的 ARIA 属性

function AccessiblePopup({ isOpen, onClose, children }) {
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') onClose();
    };

    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
      document.body.style.overflow = 'hidden';
    }

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      document.body.style.overflow = '';
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div 
      className="popup-overlay"
      onClick={(e) => e.target === e.currentTarget && onClose()}
      role="dialog"
      aria-modal="true"
    >
      <div className="popup-content" tabIndex={-1}>
        {children}
      </div>
    </div>
  );
}