最近在开发一个公众号项目，需要实现简单的聊天功能，如下图：
由于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的完美解决方案，望友友们不吝赐教！！！
