React div 实现一个 textarea

原文：codesky.me/archives/re…

用掘金刊登虽然分流了可是主要是！如今分享的曝光率实在过低了！！因此…………↑支持的请点下原博收藏下关注下以及个人微博。

看到标题，老爷们确定不满意，切，用 div 实现一个 textarea 有啥难度，不就是 contenteditable 吗？

看到 React，又要多加一句：切，跟用什么库有什么关系。实际上在使用的时候，我仍是遇到了一点微小的麻烦。

全选

在 textarea 中，全选只须要使用 element.select() 就能够，它的做用是：

The HTMLInputElement.select() method selects all the text in a <textarea> element or an <input> element with a text field.

然而在 div 中，没有这样的函数，因此须要本身划定范围而且选中：

const selection = window.getSelection()
const range = document.createRange()
range.selectNodeContents(this.textInput) // DOM
selection.removeAllRanges()
selection.addRange(range)
复制代码

纯文字的切换

在 textarea 中，全部内容都会变成文本，可是在 div 中，咱们很容易受到转义的影响。

尽管 user-modify: read-write-plaintext-only; 这个能够免于标签注入的烦恼，可是依旧会遇到换行的问题，换行操做在 div 中是 <br />，对于文原本说是 \n，因而，咱们还须要在转换时作一遍替代：

this.initInput = input.replace(/\n/g, '<br />')
复制代码

无警告渲染的方式

在 React 中，若是你用 div 取代输入，会有一个 warning 警告，虽然不影响使用，可是 warning 老是让人浑身难受，这种时候如下两个属性能够避免这个烦恼：

suppressContentEditableWarning={true}
dangerouslySetInnerHTML={{ __html: this.initInput }}
复制代码

剩下的都不是什么大问题，相信你们是能搞定的！