如何实现Material UI Popper点击后自动在几秒内消失

要实现点击“复制链接”按钮后显示提示，1-2秒后自动消失的效果，你可以通过添加定时器和调整状态逻辑来修改原代码，具体实现如下：

import * as React from 'react';
import Box from '@mui/material/Box';
import Popper from '@mui/material/Popper';

export default function CopyLinkPopper() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const timerRef = React.useRef(null);

  const handleClick = (event) => {
    // 每次点击都触发提示显示
    setAnchorEl(event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'copy-link-popper' : undefined;

  React.useEffect(() => {
    if (open) {
      // 设置1.5秒后自动关闭提示
      timerRef.current = setTimeout(() => {
        setAnchorEl(null);
      }, 1500);
    }

    // 清理定时器，避免内存泄漏
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, [open]);

  return (
    <div>
      <button aria-describedby={id} type="button" onClick={handleClick}>
        复制链接
      </button>
      <Popper id={id} open={open} anchorEl={anchorEl}>
        <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
          链接已复制
        </Box>
      </Popper>
    </div>
  );
}

关键改动说明 #

• 点击逻辑调整：每次点击按钮直接设置anchorEl为当前元素，确保每次点击都能弹出提示，而非切换显示状态
• 自动关闭机制：通过useEffect监听open状态，提示显示时启动1.5秒定时器，时间到后重置anchorEl关闭Popper
• 内存泄漏防护：在useEffect的返回函数中清除定时器，避免组件卸载或状态更新后定时器仍运行引发异常

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