React实现聊天机器人

最新推荐文章于 2025-01-13 22:11:19 发布

zhou_xiao_cheng

最新推荐文章于 2025-01-13 22:11:19 发布

阅读量3.8k

点赞数 1

分类专栏： React 文章标签：机器人聊天

本文链接：https://blog.csdn.net/zhou_xiao_cheng/article/details/52512434

版权

本文介绍了如何使用React和fetch工具构建一个聊天机器人，通过图灵API获取回复。首先需要注册图灵账号并获取API信息。在React中，由于安全原因，直接操作DOM并不容易，但借助refs可以定位并操作React组件。fetch返回的Promise对象处理网络数据。最后展示了聊天机器人的运行效果。

摘要由CSDN通过智能技术生成

本文原创地址链接：http://blog.csdn.net/zhou_xiao_cheng/article/details/52512434，未经博主允许不得转载。

用React实现了一个聊天机器人，结合使用fetch工具对网络数据进行读取，这些数据由图灵API提供。

前期工作

需要注册一个图灵帐号（http://www.tuling123.com/），然后创建机器人，拿到API地址及APIkey,就OK了。

废话不多说，一起来看代码：

class FetchDemo extends React.Component {
   
  //构造函数中初始化状态值，meg：输入的值，respon:机器人返回值，megArray:用户发送的值
  constructor() {
    super()
    this.state = {
      meg: '',
      respon: [],
      megArray: []
    }
  }
  //input的onChange绑定事件
  handleData(e) {
    this.setState({
      meg: e.target.value
    })
  }
  //自定义函数，处理发送数据及返回的网络数据的保