React div 实现一个 textarea

看到标题，老爷们肯定不满意，切，用 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 }}

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