如何从React中的文本区域获取所选文本？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试在react中创建一个文本编辑器。有人知道如何从textarea中获取所选文本，以便可以将样式应用于所选文本。我知道我们可以在javascript中使用window.getSelection，但我很想知道是否有其他方法可用于此功能？

回答：

是的，有一种方法可以做到这一点，特别是在React中。实现该目标的方法如下。

步骤1：-在您的textarea ui元素中使用ref。喜欢

     `<textarea
           className='html-editor'  
           ref='myTextarea' 
          value = {this.state.textareaVal}
          onChange={(event)=>{
                      this.setState({
                         textareaVal:event.target.value;
                      });
                   }}
       >
      </textarea>`

第2步：-现在您可以使用react refs访问DOM元素。

    let textVal = this.refs.myTextarea;

步骤3：-使用selectionStart和selectionEnd：-使用selectionStart和

selectionEnd，您可以了解

所选文本的开始和结束指针。

        let cursorStart = textVal.selectionStart;
        let cursorEnd = textVal.selectionEnd;

现在您有了所选文本的开始和结束索引。

第4步：-使用javascript子字符串函数来获取选定的文本。

    this.state.textareaVal.substring(cursorStart,cursorEnd)

以上是 如何从React中的文本区域获取所选文本？ 的全部内容， 来源链接： utcz.com/qa/429542.html

回到顶部