javascript - React，如何以编程方式在组件单击时选择文本

Question

我想在点击时选择一个简单的 span 元素的内容

<span 
  onClick={() => // How do I programmatically highlight the `Click Me!` text?}
>Click Me!</span>

有什么办法吗？

编辑:很抱歉，问题似乎不够清楚，我不仅想突出显示跨度，而且我实际上想触发元素的 dom 选择，因此之后可以复制和/或写在上面(例如，如果它在一个打开了可编辑内容的 div 中)。

Answer 1

非常感谢您的回答，但似乎问题没有完全清楚，对此我深表歉意。

无论如何，我在这里找到了答案:

Programmatically select text in a contenteditable HTML element?

我真的很想以编程方式选择内容，所以我使用的最后一段代码如下:

function selectContents(el: any) {
  let range = document.createRange();
  range.selectNodeContents(el);
  let sel = window.getSelection()!;
  sel.removeAllRanges();
  sel.addRange(range);
}

<span onClick={(e) => selectContents(e.target)}>
  {node.name}
</span>

它在 electro 中运行良好，但与旧版浏览器可能存在一些兼容性问题。

干杯。