选择文本并突出显示选择或获取选择值（反应）

Question

我有一个显示一些跨度的 React 应用程序：

 <span>Hello</span> <span>my</span> <span>name</span> <span> is </span> ...

我希望用户像这样用鼠标选择文本

..然后获取选定的值，或突出显示文本等。我将如何在 React 中执行此操作？我不确定要使用什么事件处理程序以及如何掌握当前选择！一个最小的例子或提示将不胜感激！

原文由 George Welder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对此没有特定于 React 的解决方案。只需使用 window.getSelection API。

---

要输出突出显示的文本运行 window.getSelection().toString()

原文由 Lyubomir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 onMouseUp 和 onDoubleClick 事件来检测调用方法，这将使用 JavaScript 选择 API 确定选择。

使用 window.getSelection() 获取选择对象。

要获取选定的文本，请使用 window.getSelection.toString() 。

要获取用于呈现弹出菜单的选定文本区域的坐标，请使用 selection.getRangeAt(0).getBoundingClientRect() 。

作为示例实现，请查看 react-highlight 库。

原文由 AntonAL 发布，翻译遵循 CC BY-SA 4.0 许可协议