如何实现用户复制剪贴板内容时触发React组件重渲染？

我正在构建一个依赖用户剪贴板内容进行验证的React组件，编写了如下自定义Hook：

import { useState } from 'react'

export default function useCopiedFromClipboard() {
  const [copiedData, setCopiedData] = useState<string>('')

    navigator.clipboard
      .readText()
      .then((text) => {
        setCopiedData(text)
      })
      .catch((err) => {
        console.error('Failed to read clipboard contents: ', err)
      })

  return { copiedData }
}

在组件中使用该Hook的代码如下：

import React from 'react'

export default function MyComponent() {
  const {copiedData} = useCopiedFromClipboard()
  
  useEffect(()=>{
    console.log('Run')
  },[copiedData])
  
  return (
    <></>
  )
}

我期望每次用户复制内容到剪贴板时，上述useEffect都会执行，但目前并未生效，请问该如何实现这一功能？

你的自定义Hook目前仅在组件初始化时读取一次剪贴板内容，不会监听后续剪贴板的变化。要实现实时响应剪贴板更新的效果，需要通过剪贴板事件监听结合React生命周期来实现，具体修改如下：

1. 更新自定义Hook，添加剪贴板监听逻辑 #

修改useCopiedFromClipboard，使用useEffect注册剪贴板相关事件，并在组件卸载时清理监听：

import { useState, useEffect } from 'react'

export default function useCopiedFromClipboard() {
  const [copiedData, setCopiedData] = useState<string>('')

  // 封装读取剪贴板的异步函数
  const readClipboardContent = async () => {
    try {
      const text = await navigator.clipboard.readText()
      setCopiedData(text)
    } catch (err) {
      console.error('读取剪贴板失败: ', err)
    }
  }

  useEffect(() => {
    // 组件挂载时先读取一次剪贴板
    readClipboardContent()

    // 定义剪贴板变化的处理函数
    const handleClipboardUpdate = () => {
      readClipboardContent()
    }

    // 注册监听：优先使用现代浏览器支持的clipboardchange事件
    navigator.clipboard.addEventListener('clipboardchange', handleClipboardUpdate)
    // 兼容旧浏览器：监听用户主动复制/剪切操作
    document.addEventListener('copy', handleClipboardUpdate)
    document.addEventListener('cut', handleClipboardUpdate)

    // 组件卸载时移除所有监听，避免内存泄漏
    return () => {
      navigator.clipboard.removeEventListener('clipboardchange', handleClipboardUpdate)
      document.removeEventListener('copy', handleClipboardUpdate)
      document.removeEventListener('cut', handleClipboardUpdate)
    }
  }, [])

  return { copiedData }
}

2. 组件中正确使用Hook #

确保组件中导入useEffect，保持对copiedData的监听逻辑：

import React, { useEffect } from 'react'
import useCopiedFromClipboard from './useCopiedFromClipboard'

export default function MyComponent() {
  const { copiedData } = useCopiedFromClipboard()
  
  useEffect(() => {
    console.log('剪贴板内容已更新:', copiedData)
  }, [copiedData])
  
  return (
    <div>当前剪贴板内容: {copiedData}</div>
  )
}

关键注意点 #

• 权限限制：浏览器对剪贴板访问有严格的安全控制，navigator.clipboard.readText()只能在用户交互（如点击、输入）的上下文内执行。如果页面加载时直接读取失败，可考虑通过用户触发的操作（比如按钮点击）来初始化读取。
• 事件兼容性：clipboardchange是较新的API，部分旧浏览器不支持，因此补充copy/cut事件作为备选，覆盖用户主动修改剪贴板的场景。
• 监听清理：必须在组件卸载时移除事件监听，避免内存泄漏问题。

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