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>或<textarea>，并将其设置为常规文字。那么onSelect就可以了。

Answer 2

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;

反应onSelect事件不起作用

2 个答案: