如何使用react js将单词建议添加到机器人的聊天输入区域？

Question

我正在使用botframework构建一个聊天机器人应用程序。我使用react js作为前端，使用.net核心作为后端来生成令牌。因为聊天输入区域是内置在网络聊天上的，所以我无法获取网络聊天输入区域的id或class。我想添加自动提示机器人，每当一个按键是在聊天输入区域完成。如何解决这个问题？

Answer 1

你说过：

由于聊天输入区域是内置在网络聊天上的，我无法获取网络聊天输入区域的id或class。

这表明您的问题是关于如何从Web聊天的输入区域读取用户输入和/或如何以编程方式将文本写入Web聊天的输入区域。我在回答你的other question时解释了如何做这两件事

网络聊天使用Redux，它有一个可以使用Redux middleware的Redux store。网络聊天有一个名为WEB_CHAT/SET_SEND_BOX的操作，可用于响应用户在文本输入框中键入的内容，如下所示：

const store = window.WebChat.createStore( {}，store => next => action => { if (action.type === 'WEB_CHAT/SET_SEND_BOX') { const user_entered_text = action.payload.text；//使用文本查询Azure数据库并显示建议} return next(=> )；})；

当用户单击建议或按右键时，您可以使用相同的操作来更改文本输入框中的内容，如下所示：

store.dispatch({ type：'WEB_CHAT/SET_SEND_BOX'，负载：{ text: user_selected_suggestion，} })；

网络聊天存储库中的samples可能有助于在网络聊天中使用Redux操作

编辑:我后来意识到，您可能需要一种访问发送框元素的方法，以便定位新的弹出框元素。您提到过想要一个jQuery的替代品，我认为如果您正常使用文档对象模型，就不需要jQuery了。这篇Stack Overflow帖子可能会在这方面对你有所帮助：Get element inside element by class and ID - JavaScript

正如在this thread that I linked previously中所看到的，自动建议不是网络聊天的一个功能，并且转向Stack Overflow请求人们免费为你构建新功能是不合适的。如果您想自己构建这个特性，那么我建议您继续学习更多关于UI elements、Web Chat、HTML、JavaScript和React的知识。当你试图完成你的项目时，如果你遇到一个具体的问题需要帮助，那么你就应该在Stack Overflow上发布一个问题。为了得到一个好的答案，你需要通过解释你所做的工作，你已经尝试过的工作，并提供你所引用的文档的链接，等等。如何构建整个新的网络聊天功能的问题对于Stack Overflow来说太广泛了，所以在你花了相当多的精力自己找出答案之后，这里有一些你最终可能会问的好问题的例子：

• 如何查找要修改的网页上预先存在的元素的ID？
• 哪种UI元素适用于web浏览器中的自动完成建议？
• 如何查询Azure数据库以根据用户输入的文本查找自动完成建议？

请注意，这些示例是如何实现word建议项目这一问题的具体部分。像这样明确你需要什么将帮助你找到合适的专家来帮助你解决你的问题。虽然我可以回答你与网络聊天相关的问题，但当你扩大问题的范围，包括与网络聊天无关的问题时，你就很难找到一个能给你一个答案的人，因为他们需要成为许多不同领域的专家。