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;