反应 onSelect 事件不起作用

Question

React 有 onSelect 语句的事件处理程序吗？即，如果用户用鼠标在段落中选择某些文本（突出显示的文本），则会触发提取所选文本的事件。

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 } 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;

Answer 1

查看https://github.com/ydeshayes/react-highlight

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

您可以作弊并使用<input>or<textarea>代替，并将其样式设置为看起来像常规文本。然后就onSelect应该可以工作了。