React中如何将DialogContentText组件的内容复制到剪贴板

你之前的写法不生效的原因是：select() 方法仅支持 <input>、<textarea> 这类可编辑表单元素，而 Material UI 的 DialogContentText 默认渲染为普通的 <p> 标签，不具备该方法，因此调用会失败。

方案1：使用 Clipboard API 实现（推荐） #

你需要复制的内容本身就是父组件传入的 code 属性，不需要依赖 ref 读取 DOM 内容，直接调用现代浏览器原生的 Clipboard API 即可实现，代码更简洁可靠：

const handleCopyClick = async () => {
  try {
    await navigator.clipboard.writeText(code)
    // 可在此处添加复制成功的交互提示，比如弹出Snackbar
  } catch (err) {
    console.error('复制失败：', err)
  }
}

注：Clipboard API 仅支持在 HTTPS 协议或 localhost 本地开发环境下使用，符合绝大多数生产场景的要求。

方案2：通过 DOM 选区实现（兼容旧浏览器） #

如果需要兼容不支持 Clipboard API 的旧版本浏览器，可以通过创建文本选区的方式读取 ref 绑定元素的内容再执行复制：

const handleCopyClick = () => {
  const range = document.createRange()
  // 选中ref绑定的DialogContentText元素的全部内容
  range.selectNode(codeText.current)
  window.getSelection().removeAllRanges()
  window.getSelection().addRange(range)
  // 执行复制命令
  document.execCommand('copy')
  // 复制完成后清除选中状态，避免用户看到文本高亮效果
  window.getSelection().removeAllRanges()
}

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