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 }}
複製代碼

剩下的都不是什麼大問題，相信你們是能搞定的！