使用React Hooks实现点击按钮后消息3秒自动消失的方法

云上老周

2026-9-29

问题说明

定时器触发逻辑错误：现有useEffect仅在组件首次挂载时执行，和点击复制操作无关联
状态使用不匹配：你定义的showMessage状态没有在渲染代码中使用，实际控制提示显示的copy状态被设置为true后没有自动重置的逻辑，导致复制成功提示会一直展示
缺少定时器清理机制：如果组件在定时器执行前卸载，会触发内存泄漏问题

修正后的代码

JS 代码

const { useState, useEffect } = React

const SectionHeader = (props) => {
  const {title, button, link, type} = props;
  const [showCopyTip, setShowCopyTip] = useState(false);

  useEffect(() => {
    // 只有当提示展示时才启动定时器
    if (!showCopyTip) return
    const timer = setTimeout(() => {
      setShowCopyTip(false)
    }, 3000)
    // 清理定时器，避免内存泄漏
    return () => clearTimeout(timer)
  }, [showCopyTip])

  const copyToClipboard = (title) => {
    navigator.clipboard.writeText(window.location.href + '#' + title.toLowerCase().replaceAll(" ", "-").replaceAll("'", ""))
    // 点击复制时开启提示
    setShowCopyTip(true)
  }

  return (
    <div id={title.toLowerCase().replaceAll(" ", "-").replaceAll("'", "")}>
      <b>{title}</b>
      <div onClick={() => copyToClipboard(title)}>Copy to clipboard</div> 
      {showCopyTip && 'copied'}
    </div>
  )
}

ReactDOM.render(<SectionHeader title="Test" />, document.getElementById("root"))

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>