React Hooks中剪切粘贴按钮首次可用，连续点击失效问题解决

核心问题分析 #

你的问题通常由以下几个原因导致：

• <a>标签默认跳转行为未阻止，触发页面锚点跳转或刷新，干扰组件状态
• 依赖已废弃的document.execCommand API，其行为在重复操作时不稳定
• 状态更新与剪贴板操作的异步顺序错误，导致组件状态与实际内容不同步
• 受控textarea的选中状态未正确维护，交替操作后无法正确定位光标/选中范围

修复后的实现代码 #

import { useState, useRef } from 'react';

const ClipboardDemo = () => {
  const [textContent, setTextContent] = useState('测试剪切粘贴内容');
  const textareaRef = useRef(null);

  // 阻止a标签默认行为
  const handlePreventDefault = (e) => {
    e.preventDefault();
  };

  // 剪切功能
  const handleCut = () => {
    const textarea = textareaRef.current;
    if (!textarea) return;

    const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
    if (!selectedText) return;

    // 计算剪切后的文本内容
    const newContent = textContent.slice(0, textarea.selectionStart) + textContent.slice(textarea.selectionEnd);
    setTextContent(newContent);

    // 写入剪贴板
    navigator.clipboard.writeText(selectedText)
      .catch(err => console.error('剪切失败:', err));

    // 同步光标位置
    setTimeout(() => {
      if (textarea) {
        textarea.selectionStart = textarea.selectionEnd = textarea.selectionStart;
      }
    }, 0);
  };

  // 粘贴功能
  const handlePaste = () => {
    const textarea = textareaRef.current;
    if (!textarea) return;

    navigator.clipboard.readText()
      .then(clipboardText => {
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        // 插入粘贴内容到光标位置
        const newContent = textContent.slice(0, start) + clipboardText + textContent.slice(end);
        setTextContent(newContent);

        // 同步光标到粘贴内容末尾
        setTimeout(() => {
          if (textarea) {
            textarea.selectionStart = textarea.selectionEnd = start + clipboardText.length;
          }
        }, 0);
      })
      .catch(err => console.error('粘贴失败:', err));
  };

  return (
    <div>
      <textarea
        ref={textareaRef}
        value={textContent}
        onChange={(e) => setTextContent(e.target.value)}
        rows={5}
        cols={50}
      />
      <div style={{ marginTop: 10 }}>
        <a href="#" onClick={(e) => {
          handlePreventDefault(e);
          handleCut();
        }}>剪切选中内容</a>
        <span style={{ margin: '0 10px' }}></span>
        <a href="#" onClick={(e) => {
          handlePreventDefault(e);
          handlePaste();
        }}>粘贴到光标位置</a>
      </div>
    </div>
  );
};

export default ClipboardDemo;

关键修复点说明 #

• 阻止<a>默认行为：在点击事件中调用e.preventDefault()，避免页面跳转干扰组件状态
• 使用现代Clipboard API：替代已废弃的document.execCommand，保证操作稳定可靠
• 维护光标状态：通过useRef获取textarea实例，状态更新后同步光标位置，确保后续操作正常
• 异步同步处理：用setTimeout等待React状态更新完成后再调整光标，规避状态更新的异步特性问题
• 边界判断：添加选中内容校验，避免无意义的剪切操作

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