CODEWITHSUNDEEP
javascriptreactjsevents
NewScientists
NewScientists

Reputation: 1262

React onSelect event not working

Does React have an event handler for the onSelect statement? i.e. if a user selects some text with their mouse within a paragraph (highlighted text) trigger an event that extracts the selected text.

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;

The above doesn't work. If there is an approach that is better i.e. extracting a string please do let me know! Once i get a simple

on highlight trigger function

Concept working I can take it from there. Thanks in advance

Solution:

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;

Upvotes: 5

Views: 50453

Answers (2)

Bartosh Lenart
Bartosh Lenart

Reputation: 31

React has this option. In my opinion You have to bind function to this key word: 

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

So, Your code will look like 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;

Upvotes: 1

pscl
pscl

Reputation: 3402

Check out https://github.com/ydeshayes/react-highlight

To get the effect you want with a regular DOM element involves a lot of delicate code handling mouse events.

You could cheat and use an <input> or <textarea> instead and style it to look like regular text. Then onSelect should just work.

Upvotes: 3

Related Questions