title: How can you get highlighted text (window.getSelection()) in ReactJS
body: <p>I have been learning to make a custom markdown editor. However I just ran into the problem of getting the highlighted text before wrapping it with the markdowns. Here's my <a href="http://jsfiddle.net/lau_chung/ohdpezxL/8/" rel="noreferrer">example</a></p>
  
  <pre><code>class TextArea extends React.Component {
      constructor(props){
      super(props);
      this.state = {
          comment:'He oppose at thrown desire of no. Announcing impression unaffected day his are unreserved indulgence.She oppose at thrown desire of no..'
      };
      this.onClickMakeBold = this.onClickMakeBold.bind(this);
    }
  
    render(){
      return &lt;div&gt;
         &lt;button onClick={this.onClickMakeBold}&gt;Bold&lt;/button&gt; 
           &lt;div&gt;
             &lt;textarea ref="textarea"&gt;{this.state.comment}&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    }
  
    onClickMakeBold(){
      console.log(getSelectionText()) 
    }
  }
  function getSelectionText() {
      var text = "";
      if (window.getSelection) {
          text = window.getSelection().toString();
      } else if (document.selection &amp;&amp; document.selection.type != "Control"){
          text = document.selection.createRange().text;
      }else{
              alert('no')
      }
      return text;
  }
  
  React.render(&lt;TextArea /&gt;, document.getElementById('container'));
  </code></pre>
  
  <p>The result from <code>getSelectionText()</code> function doesn't return any text at all. How can I get the highlighted text in ReactJS?</p>