javascript - 你如何在 ReactJS 中获得突出显示的文本 (window.getSelection())

Question

我一直在学习制作自定义 markdown 编辑器。但是，我遇到了在用 Markdown 包装之前获取突出显示文本的问题。这是我的 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()。