如何在ReactJS中獲得突出顯示的文本（window.getSelection（））

Question

我一直在學習製作自定義降價編輯器。然而，我只是遇到了在使用減價打包之前獲取突出顯示的文本的問題。這裏是我的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')); 

從getSelectionText()功能結果不返回任何文字的。我如何獲得ReactJS中突出顯示的文本？

Answer 1

通過點擊按鈕，您可以在之前取消選擇文本事件被觸發。

將回調傳遞到您的按鈕作爲onMouseDown，因爲此事件發生在標準點擊副作用發生之前。

另外：如果您希望文本在事件處理後保持選中狀態，請在回調函數中使用event.preventDefault()。