????????最近在開(kāi)發(fā)一個(gè)公眾號(hào)項(xiàng)目育谬，需要實(shí)現(xiàn)簡(jiǎn)單的聊天功能券盅，如下圖：
? ? ? ? 由于textarea不能自適應(yīng)高度，而且內(nèi)容過(guò)多時(shí)還有滾動(dòng)條膛檀，很不美觀锰镀，于是開(kāi)始百度各種方法。咖刃。泳炉。
? ? ? ? 發(fā)現(xiàn)有介紹到用塊級(jí)元素（如div）模擬實(shí)現(xiàn)textarea的說(shuō)法，于是試了一把嚎杨，發(fā)現(xiàn)確實(shí)可用花鹅，只是明明點(diǎn)擊發(fā)送按鈕后將內(nèi)容置為空，可是輸入框里還是有顯示之前發(fā)送的內(nèi)容枫浙，實(shí)現(xiàn)代碼如下翠胰，望大神指導(dǎo)！Ｗ愿之景！
1、頁(yè)面加載時(shí)：
componentDidMount() {
? ? ? let _self = this;
? ? ? ? // 監(jiān)聽(tīng)輸入框內(nèi)容
? ? ? ? document.getElementById("contentDiv").addEventListener("DOMSubtreeModified", ????????????function(e) {
????????????????_self._getContent(e)
? ? ? ? }, false);
? ? }
2膏潮、獲取輸入框內(nèi)容：
? ? _getContent(e){
? ? ? ? if(e.target.data){
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? content: e.target.data,
????????????????disabled: false,????????//按鈕是否禁用
? ? ? ? ? });
? ? ? ? }else{
? ? ? ? ? ? this.setState({
? ? ? ? ? ? ? ? content: '',
????????????????disabled: true,
? ? ? ? ? ? });
? ? ? ? }
? ? }
3锻狗、頁(yè)面
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"http://模擬輸入框
? ? ? ? ? ? ? ?value={this.state.content}
????????/>
????)
}
????????以上代碼，親測(cè)輸入和發(fā)送功能ok焕参，就是發(fā)送后輸入框的內(nèi)容明明已設(shè)置清空轻纪，render處打印content，也是空叠纷，但是輸入框里確有內(nèi)容刻帚，實(shí)在搞不定，礙于項(xiàng)目工期緊涩嚣，又改用了antd-mobile 的TextareaItem組件崇众，總算解決了問(wèn)題掂僵，但是真的很想知道div模擬textarea的完美解決方案，望友友們不吝賜教Ｇ旮琛Ｃ膛睢！
