我正在尝试在react中制作一个文本编辑器。有谁知道如何从文本区域获取所选文本,以便可以将样式应用于所选文本。我知道我们可以在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)
关于reactjs - 如何从 react 中的文本区域获取选定的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42619553/