Question

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

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

此外，如果我在控制台屏幕上记录了输入节点，然后将其另存为控制台屏幕中的全局变量，则可以通过这种方式更改该值，但是实际上将无法发送消息，请按Enter或发送箭头什么也没做。尽管似乎对这个特定的应用程序来说，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值，并为此选择填充输入栏和/或通过直线连接向机器人发送该消息。{{3} }

Answer 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网络聊天示例。

希望这会有所帮助！

是否可以使用onclick方法在网络聊天中填充输入栏

1 个答案: