0

我正在尝试向用户显示热门问题列表，当他们单击它们时，我希望他们填充输入栏和/或通过直接连接将消息发送到机器人。

我尝试使用 ReactDOM.getRootNode() 并跟踪输入节点并设置 .value 属性，但这不会填充该字段。我假设有某种形式的验证可以防止这种情况发生。

此外，如果我控制台记录输入节点，然后将其保存为控制台屏幕中的全局变量，我可以通过这种方式更改值，但实际上无法发送消息，按回车键或发送箭头什么也不做。虽然SuggestedActions 选项似乎适用于这个特定的应用程序，但我不能在这个用例中使用它。

const [chosenOption, setChosenOption] = useState(null);

const getRootNode = (componentRoot) =>{
        let root = ReactDom.findDOMNode(componentRoot)
        let inputBar = root.lastChild.lastChild.firstChild.firstChild
        console.log('Initial Console log ',inputBar)
        setInputBar(inputBar)
    }

//in render method
{(inputBar && chosenOption) && (inputBar.value = chosenOption)}

这是我试图用来查找节点的函数，所选选项按预期工作，但我无法以可用的方式更改值。

我希望用户单击一个<p>更改 selectedOption 值的元素，并让该选择填充输入栏和/或通过直接连接向机器人发送该消息。我想要完成的事情

4

1 回答 1

1

您可以使用 Web Chat 的商店发送事件以设置发送框 ( ) 或在单击项目时WEB_CHAT/SET_SEND_BOX发送消息 ( )。WEB_CHAT/SEND_MESSAGE看看下面的代码片段。

简单的 HTML

<body>
<div class="container">
  <div class="details">
    <p>Hello World!</p>
    <p>My name is TJ</p>
    <p>I am from Denver</p>
  </div>
  <div class="wrapper">
    <div id="webchat" class="webchat" role="main"></div>
    </div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

<script>
    // Initialize Web Chat store
    const store = window.WebChat.createStore();

    // Get all paragraph elements and add on click listener
    const paragraphs = document.getElementsByTagName("p");

    for (const paragraph of paragraphs) {
      paragraph.addEventListener('click', ({ target: { textContent: text }}) => {
        // Dispatch set send box event
        store.dispatch({
          type: 'WEB_CHAT/SET_SEND_BOX',
          payload: {
            text
          }
        });
      });
    }

    (async function () {
      const res = await fetch('/directline/token', { method: 'POST' });
      const { token } = await res.json();

      window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token }),
        store,
      }, document.getElementById('webchat'));

      document.querySelector('#webchat > *').focus();
    })().catch(err => console.error(err));
  </script>
</body>

反应版本

import React, { useState, useEffect } from 'react';
import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';

const WebChat = props => {
  const [directLine, setDirectLine] = useState();

  useEffect(() => {
    const initializeDirectLine = async () => {
      const res = await fetch('http://localhost:3978/directline/token', { method: 'POST' });
      const { token } = await res.json();
      setDirectLine(createDirectLine({ token }));
    };
    initializeDirectLine();

  }, []);

  return directLine
    ? <ReactWebChat directLine={directLine} {...props} />
    : "Connecting..."
}

export default () => {
  const [store] = useState(createStore());
  const items = ["Hello World!", "My name is TJ.", "I am from Denver."]

  const click = ({target: { textContent: text }}) => {
    store.dispatch({
      type: 'WEB_CHAT/SET_SEND_BOX',
      payload: {
        text
      }
    });
  }

  return (
    <div>
      <div>
        { items.map((item, index) => <p key={index} onClick={click}>{ item }</p>) }
      </div>
      <WebChat store={store} />
    </div>
  )
};

截屏

在此处输入图像描述

有关更多详细信息，请查看Programmatic Post as Activity Web Chat 示例。

希望这可以帮助！

于 2019-07-01T20:08:08.400 回答