React用document.execCommand从div复制文本报select不是函数错误

你遇到的TypeError: inputArea.input.select() is not a function问题，核心原因有两点：

• 从DOM方法特性来看，select() 是<input>、<textarea>这类可编辑表单元素的专属原型方法，普通<div>是纯文本容器，不存在这个内置方法，不管ref取值是否正确，直接调用这个方法都会抛出类型错误
• 部分场景下的取值偏移（比如误把current嵌套成input层级）也会加剧这个问题，但本质上哪怕ref绑定完全正确，原有的inputArea.current.select()逻辑也无法对div生效

你给div绑定ref的操作本身没有问题，错误出在选中文本的逻辑没有适配div元素的特性。

针对div容器的文本复制，不需要强行把元素替换成input/textarea，直接用浏览器原生的Range + Selection API 选中文本内容，再执行复制即可，修正后的逻辑流程如下：

1. 先判断ref对应的DOM节点是否存在，避免短链接未加载时的空值报错
2. 创建独立的文本选中范围，把div内的全部内容纳入选中范围
3. 清空页面原有选中状态，把新创建的范围绑定到全局Selection对象，完成实际的文本高亮选中
4. 执行系统复制命令，将选中的文本写入剪贴板
5. 清除页面选中状态，避免文本持续高亮影响用户操作

修正后的完整代码片段：

import { useCallback, useEffect, useRef, useState } from "react";

const Shorten = () => {
  const [copySuccess, setCopySuccess] = useState('');
  const inputArea = useRef(null);

  const copyLink = (e) => {
    // 空值边界判断
    if (!inputArea.current) return;
    setCopySuccess('');

    // 创建选中范围
    const range = document.createRange();
    range.selectNodeContents(inputArea.current);

    // 绑定选中状态
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    // 执行复制
    try {
      document.execCommand('copy');
      setCopySuccess('Copied!');
    } catch (err) {
      setCopySuccess('Copy failed, please try again');
    }

    // 清除选中高亮
    selection.removeAllRanges();
    e.target.focus();
  };

  return (
    <section>
      {isPending && <div className="loading-text">Loading...</div>}
      {shortLink && <div ref={inputArea} className="shorten-text">{shortLink}</div>}
      <hr />
      <div>
        <button className="shorten-it" onClick={copyLink}>Copy</button>
        {copySuccess}
      </div>
    </section>
  )
}

• 不要给承载短链接的div添加user-select: none的CSS样式，否则文本会被禁止选中，复制操作会直接失效
• 现代浏览器环境下，可以把传统的document.execCommand('copy')替换为navigator.clipboard.writeText(inputArea.current.innerText)，这种方式不需要手动创建选中范围，代码更简洁，适配性也更强
• 原代码中ref绑定的位置完全正确，不需要做任何调整

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