如何以编程方式清除聊天中输入字段（发送框）的内容 window | MS Bot 框架 |直线机器人

Question

我在聊天机器人的后端使用 QnAMaker，它在直线机器人频道中运行。在我想清除输入字段中的内容的情况下，我使用了以下简单的 JavaScript 行

document.querySelector("[aria-label='Sendbox']").value ="";

它在那一刻清除了内容，但是当我们在输入字段内单击以键入下一个问题时它又出现了。所以内容实际上并没有被清除。

所以建议我一种方法，我应该以编程方式永久清除聊天 window 的输入字段（发送框）。

Answer 1

您可能对此答案感兴趣：How to add AutoComplete/AutoSuggestion in Microsoft botframework webchat using React.js

Web Chat uses Redux which has a Redux store that can use Redux middleware. Web chat has an action called WEB_CHAT/SET_SEND_BOX that can be used to respond to what the user types in the text input box like this:
const store = window.WebChat.createStore(
    {},
    store => next => action => {
        if (action.type === 'WEB_CHAT/SET_SEND_BOX') {
            const user_entered_text = action.payload.text;

            // Use the text to query the Azure database and display suggestions
        }
        return next(action);
    }
);
When the user clicks on a suggestion or presses the right key, you can use that same action to change what's in the text input box like this:
store.dispatch({
    type: 'WEB_CHAT/SET_SEND_BOX',
    payload: {
        text: user_selected_suggestion,
    }
});
There are samples in the Web Chat repo that may help with using Redux actions in Web Chat

您正在尝试在不使用 Redux 存储的情况下编辑发送箱的内容，因此网络聊天不知道您正在尝试进行的更改。如果您使用带有空文本的 WEB_CHAT/SET_SEND_BOX 操作，那么您可以正确清除发送框。

Answer 2

问题的确切解决方案是以下代码。

function clearinput()
{

                    store.dispatch({
                    type: 'WEB_CHAT/SET_SEND_BOX',
                    payload: {

                            text: "",
                         }
                    });
                         document.querySelector("[aria-label='Sendbox']").value ="";


}

感谢 Kyle Delaney 的详细解释，根据您的意见我已经做到了。

如何以编程方式清除聊天中输入字段（发送框）的内容 window | MS Bot 框架 |直线机器人

How to programmatically clear the content of the input field (sendbox) in the chat window | MS Bot framework | Directline bot

javascript

botframework

direct-line-botframework