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

Question

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

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

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

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

Answer 1

下面是 React 中使用函数式组件的示例：

const Post = () => {
    const handleMouseUp() {
        console.log(`Selected text: ${window.getSelection().toString()}`);
    }
    return (
        <div onMouseUp={handleMouseUp}>Text</div>
    );
}

正如 Lyubomir 指出的，window.getSelection() API 可以解决这个问题！

Answer 2

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

使用window.getSelection()得到的选择对象。

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

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

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

Answer 3

我认为这是正确的方法...

 document.onmouseup = () => {
   console.log(window.getSelection().toString());
 };

Answer 4

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

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