React.js如何实现双击文本单词触发函数并获取选中内容存入数组？

嘿，这个需求实现起来其实挺简单的，我直接给你一个完整的可运行组件示例，再拆解关键步骤：

import { useState } from 'react';

function WordHighlighter() {
  // 用useState维护选中的单词数组
  const [selectedWords, setSelectedWords] = useState([]);

  // 处理双击事件的核心函数
  const handleDoubleClick = () => {
    // 获取用户选中的文本
    const selection = window.getSelection();
    const selectedText = selection.toString().trim();

    // 过滤掉空内容，避免存入无效值
    if (!selectedText) return;

    // 检查单词是否已经在数组中，避免重复存储
    if (!selectedWords.includes(selectedText)) {
      setSelectedWords(prev => [...prev, selectedText]);
    }
  };

  return (
    <div>
      {/* 给p标签绑定双击事件 */}
      <p onDoubleClick={handleDoubleClick}>
        这是一段测试文本，双击任意单词就能将它存入数组中。试试双击“测试”或者“单词”看看效果！
      </p>
      
      {/* 展示已选中的单词，方便验证效果 */}
      <div>
        <h3>已选中的单词：</h3>
        <ul>
          {selectedWords.map((word, index) => (
            <li key={index}>{word}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default WordHighlighter;

关键细节解释： #

• 双击事件绑定：直接给<p>标签加上onDoubleClick属性，指向处理函数handleDoubleClick。浏览器默认双击文本会选中单个单词，刚好匹配你的需求。
• 获取选中文本：用window.getSelection() API获取用户的选中内容，通过toString()转成字符串，再用trim()去掉前后空格，避免存入空字符串。
• 状态更新：用useState维护选中单词数组，更新时用展开运算符[...prev, selectedText]创建新数组，遵循React的不可变更新原则。同时加入了重复判断，避免同一个单词被多次存入。
• 效果验证：我加了一个展示区域，能直观看到已选中的单词，方便你快速确认功能是否正常。

可选扩展（处理多单词选中）： #

如果需要支持用户手动选中多个单词的场景，可以修改事件处理函数，把选中内容分割成单词数组后再存入（记得去重）：

const handleDoubleClick = () => {
  const selection = window.getSelection();
  const selectedText = selection.toString().trim();
  if (!selectedText) return;

  // 分割成单词数组并过滤空值
  const words = selectedText.split(/\s+/).filter(word => word);
  // 合并现有数组并去重
  const newWords = [...new Set([...selectedWords, ...words])];
  setSelectedWords(newWords);
};

这样就能覆盖更多使用场景啦！

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