Next.js项目实现按钮点击显示消息x秒（不使用alert()）方案咨询

当然可以实现，不用alert()完全没问题。核心思路是用React的状态控制消息的显示/隐藏，结合setTimeout定时切换状态，同时处理好定时器的清理避免内存泄漏。

实现步骤与代码示例 #

1. 用状态管理消息显示状态：通过useState创建布尔状态控制<p>元素的条件渲染。
2. 点击事件触发显示与定时隐藏：点击按钮时切换状态为显示，同时设置定时器在指定秒数后切换为隐藏。
3. 清理定时器避免冲突：用useRef保存定时器ID，重复点击时清除旧定时器，组件卸载时也清除定时器防止内存泄漏。

以下是完整的组件代码：

'use client'; // Next.js 13+ App Router 需要添加该指令
import { useState, useRef, useEffect } from 'react';

export default function MessageButton() {
  const [showMessage, setShowMessage] = useState(false);
  const timerRef = useRef(null); // 存储定时器ID

  const handleClick = () => {
    // 清除之前的定时器，避免重复点击导致多个定时器冲突
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    setShowMessage(true);
    // 设置x秒后隐藏消息，示例为3秒（3000毫秒），可自行修改数值
    timerRef.current = setTimeout(() => {
      setShowMessage(false);
      timerRef.current = null;
    }, 3000);
  };

  // 组件卸载时清除定时器，防止内存泄漏
  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, []);

  return (
    <div style={{ margin: '20px' }}>
      <button onClick={handleClick} style={{ padding: '8px 16px', cursor: 'pointer' }}>
        点击显示消息
      </button>
      {showMessage && (
        <p style={{ 
          marginTop: '10px', 
          padding: '8px', 
          backgroundColor: '#f0f9ff', 
          color: '#0369a1',
          borderRadius: '4px'
        }}>
          这是会自动消失的消息！
        </p>
      )}
    </div>
  );
}

关键点说明 #

• 'use client'指令：如果使用Next.js 13+的App Router，必须添加该指令，因为状态管理属于客户端交互逻辑。
• 定时器清理逻辑：每次点击按钮时先清除旧定时器，确保新的定时不会被旧任务干扰；组件卸载时清除定时器，避免残留的定时器占用资源。
• 样式自定义：示例用内联样式简单美化消息，你可以替换为CSS模块、Tailwind CSS或其他项目使用的样式方案。

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