我有一个显示一些跨度的 React 应用程序：
<span>Hello</span> <span>my</span> <span>name</span> <span> is </span> ...
我希望用户像这样用鼠标选择文本 
..然后获取选定的值，或突出显示文本等。我将如何在 React 中执行此操作？我不确定要使用什么事件处理程序以及如何获取当前选择！一个最小的例子或提示将不胜感激！
选择文本并突出显示选择或获取选择值（react）
IT技术
javascript
html
reactjs
electron
2021-03-28 01:04:23
6个回答
使用onMouseUp和onDoubleClick事件来检测调用方法，这将使用 JavaScript 选择 API 确定选择。
使用window.getSelection()得到的选择对象。
要获取选定的文本，请使用window.getSelection.toString().
要获取用于渲染弹出菜单的选定文本区域的坐标，请使用selection.getRangeAt(0).getBoundingClientRect().
作为示例实现，请查看react-highlight库。
我认为这是正确的方法...
document.onmouseup = () => {
console.log(window.getSelection().toString());
};
这是 React 中使用函数式组件的示例：
const Post = () => {
const handleMouseUp() {
console.log(`Selected text: ${window.getSelection().toString()}`);
}
return (
<div onMouseUp={handleMouseUp}>Text</div>
);
}
正如 Lyubomir 指出的那样 window.getSelection() API 可以解决问题！
第 1 步： - 最初每次输入内容时，鼠标都会捕获
<textarea type="text"
className="contentarea__form__input"
onMouseUpCapture={this.selectedText}>
</textarea>
第 2 步：为了确保它只捕获您选择的文本，我使用了 if-else 条件
selectedText = () => {
window.getSelection().toString() ? console.log(window.getSelection().toString()) : null;
}
其它你可能感兴趣的问题