使用div模拟自适应高度的textarea

textarea文本域及自适应高度

textarea文本域用来做多行输入，大部分情况下都能吗，满足我们的需求，但是textarea不能想div元素那样随着内容的增多高度自适应，而固定高度又会宣示出滚动条，在移动端这样的显示很丑。

div模拟textarea文本域及高度自适应

可以使用div 的contentEditable属性，使用户能够编辑元素的内容。而div又能自适应高度，这样就解决了textarea的不足

<!-- react -->
<div 
    contentEditable={true}
    className="text-box" 
    ref={(ref)=>{ this.textEdit = ref }}>
    同意。
</div>

这时在div中输入的文本包含div,br等dom元素，可以使用css属性 -webkit-user-modify 设置用来控制用户能否对页面文本进行编辑

React直接使用contentEditable问报错，需如下使用：

    componentDidMount () {
        this.textEdit.setAttribute('contentEditable', true)
    }

    render() {
        return (
            <div>
                <div 
                    className="text-box" ref={(ref)=>{
                        this.textEdit = ref
                    }}>
                        同意。
                    </div>
            </div>
        )
    }