Wie können Sie markierten Text (window.getSelection()) in ReactJS

Question

Ich habe gelernt, einen benutzerdefinierten Markdown-Editor zu machen. Ich habe jedoch gerade das Problem, den markierten Text zu erhalten, bevor ich ihn mit den Abschriften umbrachte. Hier ist mein example

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 <div> 
     <button onClick={this.onClickMakeBold}>Bold</button> 
     <div> 
      <textarea ref="textarea">{this.state.comment}</textarea> 
     </div> 
    </div> 
    } 

    onClickMakeBold(){ 
    console.log(getSelectionText()) 
    } 
} 
function getSelectionText() { 
    var text = ""; 
    if (window.getSelection) { 
     text = window.getSelection().toString(); 
    } else if (document.selection && document.selection.type != "Control"){ 
     text = document.selection.createRange().text; 
    }else{ 
      alert('no') 
    } 
    return text; 
} 

React.render(<TextArea />, document.getElementById('container')); 

Das Ergebnis aus getSelectionText() Funktion keinen Text überhaupt nicht zurück. Wie kann ich den hervorgehobenen Text in ReactJS erhalten?

Answer 1

Durch Klicken auf die Schaltfläche deaktivieren Sie den Text , bevor das Ereignis ausgelöst wird.

Übergeben Sie den Rückruf an Ihre Schaltfläche als onMouseDown, da dieses Ereignis vor dem Standardklick Seiteneffekte passiert.

Auch: Wenn der Text nach der Verarbeitung des Ereignisses ausgewählt bleiben soll, verwenden Sie in Ihrer Callback-Funktion event.preventDefault().