Question

由于与该机器人集成的其他服务，我们必须使用HTML锚点而不是markdown。

当有链接时，我们将其动态切换为以下代码：

var newStr = sub.replace('*|', '<a class="chatbot-link" title="help" href="#" onClick={this.click}>').replace('*', '</a>');

目标是当单击链接时，我将文本内容作为响应发送回机器人。问题是我无法弄清楚如何捕获onclick事件。单击时唯一要做的就是在页面源代码中生成单独的index.js。

我使用的代码的基础是一个github webchat示例：Link

添加的对示例非常重要的代码（在MinimizableWebChat.js中）：

const MinimizableWebChat = (activityID, children) => {
  const store = useMemo(
    () =>
      createStore({}, ({ dispatch }) => next => action => {

        console.log(action.type);

        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
          dispatch({
            type: 'WEB_CHAT/SEND_EVENT',
            payload: {
              name: 'initConversation',
              value: {
                language: window.navigator.language
              }
            }
          });
        } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          if (action.payload.activity.from.role === 'bot') {
            setNewMessage(true);
            // action.payload.activity.text = action.payload.activity.text;        
            // action.payload.activity.text = ();

             action.payload.activity.text = ParseLinks(action.payload.activity.text);

            var atts = action.payload.activity.attachments;
            if (atts){
              atts.forEach(att => {
                att.content.body.forEach(obj => {
                  obj.text = EmphasizeContent(obj.text);
                })
              });
            }
          }        
       }

        return next(action);
      }),
    []
  );

  const items = ["Hello World!", "My name is TJ.", "I am from Denver."];

      var text = "asd";

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

  const ParseLinks = (text) => {
    if(!text) return text;

    text = String(text);
    var a=[], i=-1;

    // Search for *|, if found, find next * and substirng. Add html to each substring    
    while((i=text.indexOf("*|",i+1)) >= 0) {
      var iA = text.indexOf("*", i+2);
      var sub = text.substring(i,iA+1);
      // var newStr = sub.replace('*|', '<a class="chatbot-link" title="help" href="#" onClick={this.click}>').replace('*', '</a>');
      var newStr = sub.replace('*|', '<a class="chatbot-link" title="help" href="#" onClick={this.click}>').replace('*', '</a>');

      text = text.replace(sub, newStr);
    } 
    return text;
  }

我尝试在中间件商店中以及直接在机器人MinimizableWebChat.js和WebChat.js中捕获它。我需要某种挂钩才能以某种方式从ReactWebChat获取事件，以便在中间件中与事件进行交互。

Fyi，React的新手，谢谢您的帮助。

Bot Framework网络聊天在React中链接onclick

0 个答案: