Javascript 对选择事件不起作用作出反应

React是否有onSelect语句的事件处理程序？i、 e.如果用户在段落内用鼠标选择某些文本（突出显示的文本），则触发提取所选文本的事件

import React, { Component } from 'react';

class ReadModule extends Component {
  selectedText() {
      console.log("You selected some text");
  }

  render() {
    return (
          <div id="read-module" className="row">
            <p>Reading:</p>
            <span onSelect={this.selectedText}>{this.props.reading}</span>
          </div>
    );
  }
}

export default ReadModule;

import React，{Component}来自'React'；
类ReadModule扩展组件{
selectedText（）{
log（“您选择了一些文本”）；
}
render（）{
返回(
阅读：

{this.props.reading}
);
}
}
导出默认读取模块；

上述方法不起作用。如果有更好的方法，即提取字符串，请务必让我知道！一旦我得到一个简单的

关于高亮触发函数

我可以从那里开始。提前谢谢

解决方案：

import React, { Component } from 'react';

class ReadModule extends Component {
  selectedText() {
        var txt = "";
        if (window.getSelection) {
                txt = window.getSelection();
        }
        else if (document.getSelection) {
            txt = document.getSelection();
        } else if (document.selection) {
            txt = document.selection.createRange().text;
        }

        alert("Selected text is " + txt);
  }

  render() {
    return (
          <div id="read-module" className="row">
            <p>Reading:</p>
            <span onMouseUp={this.selectedText}>{this.props.reading}</span>
          </div>
    );
  }
}

export default ReadModule;

import React，{Component}来自'React'；
类ReadModule扩展组件{
selectedText（）{
var txt=“”；
if（window.getSelection）{
txt=window.getSelection（）；
}
else if（document.getSelection）{
txt=document.getSelection（）；
}else if（文档选择）{
txt=document.selection.createRange（）.text；
}
警报（“所选文本为“+txt”）；
}
render（）{
返回(
阅读：

{this.props.reading}
);
}
}
导出默认读取模块；

退房

要使用常规DOM元素获得想要的效果，需要使用大量微妙的代码来处理鼠标事件

---

你可以作弊，使用

或

替代，并将其样式设置为普通文本。然后，

onSelect

应该可以正常工作。

React有这个选项。在我看来，您必须将函数绑定到以下关键字：

onSelect={this.selectedText.bind(this)}

因此，您的代码将如下所示：

import React, { Component } from 'react';

class ReadModule extends Component {
  selectedText() {
      console.log("You selected some text");
  }

  render() {
    return (
          <div id="read-module" className="row">
            <p>Reading:</p>
            <span onSelect={this.selectedText.bind(this)}>{this.props.reading}</span>
          </div>
    );
  }
}

export default ReadModule;

import React，{Component}来自'React'；
类ReadModule扩展组件{
selectedText（）{
log（“您选择了一些文本”）；
}
render（）{
返回(
阅读：

{this.props.reading}
);
}
}
导出默认读取模块；

我可能弄错了，但AFAIK onSelect仅适用于输入字段和文本框，而不适用于范围。你必须自己实现它。嘿，兄弟，我使用了你的解决方案，这很好，但我想如果第一部分足以获得选定的文本，为什么要添加另外两个else语句？谢谢，这很有效。我确实选择了文本（e）{console.log（e）}。这将返回一个代理。现在我不确定这是什么，但这是提取所选值的正确方法吗？嘿！正如您所知，如果您像这样声明

selectedText

函数，

selectedText=（）=>{}

是对将投入生产的应用程序可接受的输入或文本区域进行欺骗，如果它使应用程序暴露于漏洞，您就不需要使用

bind

。你认为呢？你应该给输入一个

readonly

属性。只要你的输入没有连接到任何东西，我看不出有什么值得担心的。当然，如果你能让它与

一起工作，那它就更好了。未捕获错误：输入是一个无效的元素标记，不能有

子元素
，也不能使用
危险的HTML
像这样获取其正文文本
<代码>
可能更适合您。