React實現聊天機械人

用react實現了乙個聊天機械人，結合使用fetch工具對網路資料進行讀取，這些資料由圖靈api提供。

需要註冊乙個圖靈帳號（然後建立機械人，拿到api位址及apikey,就ok了。

廢話不多說，一起來看**：

class
fetchdemo
extends
react.component 
} //input的onchange繫結事件
handledata(e) )
} //自定義函式，處理傳送資料及返回的網路資料的儲存操作
sendmessage() else)
//鎖定當前環境
var that = this
//使用fetch工具
var func = fetch('' + message, ).then(function(response) ).then(function(detail) , () => ))
})this.state.meg = ''
}} render() >
div>
div>
div>)
)}div>
"input" value= onchange= />
"button" onclick=>傳送
div>
div>
)}}

以上**的實現都是比較簡單的，需要特別說明的是refs，它的使用方法如下：

class
demo
extends
react.component 
render() 
}

這是因為，在react中，為了安全（防止xcc等），乙個元件類中的render()方法返回的其實並不是真正的dom（所以render()裡面的也不是真正的dom節點）,它返回的是一棵最終會渲染成html的react元件樹。那麼，當你需要在某個dom節點做什麼的時候，就鬱悶了。。。

但是，機智的facebook已經幫你想好解決方法啦，那就是使用refs。在render()方法中，你可以像上面一樣，在標籤（如等）及元件裡使用ref對這個標籤或元件進行定位，接著，在元件類定義的方法裡，使用reactdom.finddomnode(this.refs.refname)就可以拿到已經渲染成html、且被定位了的該節點，然後，你想在該節點做什麼（額，剩下就是你自己的事了）。。。

其次，在demo中，我們使用的fetch工具返回的是乙個promise物件，不了解的可以戳阮兄-promise物件。

好啦，大公告成，效果如下（傳送訊息按鈕被rerun遮得差不多了，鬱悶…要和小機械人聊天的話，一定不要戳錯按鈕哦）：

height="585" scrolling="no" src="" allowfullscreen="true" width="100%'">

React實現聊天機械人

聊天機械人

機械人聊天軟體c C 聊天機械人

聊天機械人ELIZA

React實現聊天機械人

聊天機械人

機械人聊天軟體c C 聊天機械人

聊天機械人ELIZA

相關推薦