React中如何在onCopy事件中获取复制的内容？

要实现这个需求，你可以利用input元素的selectionStart和selectionEnd属性获取选中文本的范围，再从原字符串中截取对应部分，具体代码如下：

function handleCopy(event) {
  const inputElement = event.target;
  // 获取选中文本的起始与结束索引
  const start = inputElement.selectionStart;
  const end = inputElement.selectionEnd;
  // 从原字符串中截取选中的子串
  const copiedText = inputElement.value.slice(start, end);
  
  // 可根据需求处理获取到的子串，比如打印或业务逻辑处理
  console.log('被复制的内容：', copiedText);
}

// 组件使用示例
function App() {
  return (
    <input 
      value="Jackie has a very big chicken at his farm" 
      onCopy={handleCopy} 
    />
  );
}

补充说明 #

• selectionStart：返回选中文本在input值中的起始索引（未选中内容时，该值与selectionEnd相等）
• selectionEnd：返回选中文本在input值中的结束索引
• 通过slice(start, end)方法，就能精准截取用户选中并触发复制的子串

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