div模拟实现textarea

        最近在开发一个公众号项目，需要实现简单的聊天功能，如下图：

        由于textarea不能自适应高度，而且内容过多时还有滚动条，很不美观，于是开始百度各种方法。。。

        发现有介绍到用块级元素（如div）模拟实现textarea的说法，于是试了一把，发现确实可用，只是明明点击发送按钮后将内容置为空，可是输入框里还是有显示之前发送的内容，实现代码如下，望大神指导！！！

1、页面加载时：
componentDidMount() {

      let _self = this;

        // 监听输入框内容

        document.getElementById("contentDiv").addEventListener("DOMSubtreeModified",             function(e) {

                _self._getContent(e)

        }, false);

    }

2、获取输入框内容：

    _getContent(e){

        if(e.target.data){

            this.setState({

                content: e.target.data,

                disabled: false,        //按钮是否禁用

          });

        }else{

            this.setState({

                content: '',

                disabled: true,

            });

        }

    }

3、页面

render(){

    return(

        <div

            id='contentDiv'

            style={{

                    width:'14.3rem',minHeight:'1.8rem',borderRadius:17,

                    backgroundColor:'#F7F7F7',color:'#0F0F0F',fontSize:'0.7rem',

                    paddingLeft:12,paddingRight:12,paddingBottom:6,paddingTop:6

                }}

              contentEditable="true"//模拟输入框

               value={this.state.content}

        />

    )

}

        以上代码，亲测输入和发送功能ok，就是发送后输入框的内容明明已设置清空，render处打印content，也是空，但是输入框里确有内容，实在搞不定，碍于项目工期紧，又改用了antd-mobile 的TextareaItem组件，总算解决了问题，但是真的很想知道div模拟textarea的完美解决方案，望友友们不吝赐教！！！