文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从react的文本区获取选中的文本？

问如何从react的文本区获取选中的文本？
EN

Stack Overflow用户

提问于 2017-03-06 15:11:00

回答 2查看 10.4K关注 0票数 7

我正在尝试在react.Does中制作一个文本编辑器，有谁知道如何从文本区域中获取所选文本，以便在所选文本上应用样式。我知道我们可以在javascript中使用window.getSelection，但我很好奇是否有其他方法可用于此功能？

reactjs

textarea

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-03-06 16:33:39

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

步骤1:-在你的文本区域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 you can get to know your start and end pointer

      of selected text.which can be done as below;

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

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

步骤4 :-使用javascript substring函数获取选中的文本。

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

票数 10

Stack Overflow用户

发布于 2017-03-06 15:37:57

在React中制作文本编辑器的最好方法是使用DraftJS。

如果你使用的是React，DraftJS是最好的选择。它抽象了您在尝试从头开始创建自己的文本编辑器时所面临的许多挑战。这包括管理编辑器的状态(类似于管理组件的状态)、管理文本选择、应用不同的属性等。

您可以使用get started by checking out the docs，我建议您查看该页面上的介绍视频，其中介绍了DraftJS旨在解决的困难。

我希望这能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42619553

复制

相似问题

问如何从react的文本区获取选中的文本？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从react的文本区获取选中的文本？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从react的文本区获取选中的文本？
EN