将文本插入文本框并模拟在Bot Framework的Web聊天中单击按钮 [英] Insert a text into a textbox and simulate click on the button in Bot Framework's Web Chat

问题描述

在这里拨弄: https://jsfiddle.net/chpaeeL9/1/

Microsoft Bot Framework具有一个webchat模块，可让您与您的机器人对话.

Microsoft Bot Framework has a webchat module that allows you to talk to your bot.

当用户单击Say Hi按钮时，我想在Webchat的文本框中放置一些文本，然后使用JavaScript在Webchat内单击Send按钮.

When the user clicks the Say Hi button, I want to place some text into the webchat's textbox, and click the Send button inside the webchat using JavaScript.

听起来好像太简单了，但事实并非如此.这是我当前拥有的代码，它不起作用:某种程度上不会触发click事件.

Sounds like something too easy, but it wasn't. Here's the code that I currently have, and it doesn't work: the click event somehow is not triggered.

$('#sayhibutton').click(function() {
  $('.wc-console').addClass('has-text'); // works
  $('.wc-shellinput').val("Hi bot!").change(); // works
  $('.wc-send').click(); // doesn't work!
  $('.wc-send svg').click(); // doesn't work either
});

更新:如果有帮助，似乎该接口是使用React编写的.

Update: if that helps, it seems the interface is written using React.

更新:我的问题与之前关于如何避免在网络聊天中使用iframe的问题不同.

Update: my question is different from my previous question about how to avoid iframes in webchat.

推荐答案

好的，由于缺少更好的选择，我的解决方案是一个非常肮脏和丑陋的解决方案.

OK, for the lack of a better option my solution was a pretty dirty and ugly one.

将botchat.js中的代码保存到文件中，并从HTML(而不是CDN版本)引用保存的文件.

Save the code in botchat.js into a file and reference that saved file from the HTML, rather than the CDN version.

在Chrome中漂亮地打印文件，然后找到显示以下内容的行:

Pretty-print the file in Chrome and find the line that says:

e.prototype.sendMessage = function() {
  this.props.inputText.trim().length > 0 && this.props.sendMessage(this.props.inputText)
}

用以下内容替换中间行:

Replace the middle line with this:

this.textInput.value.trim().length > 0 && this.props.sendMessage(this.textInput.value)

这基本上意味着从this.textInput.value而不是从this.props.inputText获取消息文本，或者换句话说，直接从textinput的DOM节点获取消息文本.

This basically means to take the message text from this.textInput.value rather than from this.props.inputText, or in other words, take it directly from the textinput's DOM node.

以某种方式触发文本框上的change事件并不会在文本框上引起实际的change事件，这就是我们需要这样做的原因.

Somehow triggering the change event on a textbox doesn't cause an actual change event on the textbox, which is why we need to do this.

这篇关于将文本插入文本框并模拟在Bot Framework的Web聊天中单击按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！