处理点击事件并在反应网络聊天上切换按钮颜色答案

【问题标题】：handle the event on click and toggle the button color on react webchat处理点击事件并在反应网络聊天上切换按钮颜色
【发布时间】：2020-08-01 22:49:37
【问题描述】：

我正在尝试一些关于响应网络聊天的反馈选项。我从 Microsoft 的一位团队成员那里得到了满足我的要求的线索。这是我请求功能的github链接。 https://github.com/microsoft/BotFramework-WebChat/issues/3102

在此我得到了解决方案，但仍有一件事是滞后的，我无法理解处理相同问题的方法。

点击竖起大拇指，背景颜色将变为绿色（这是有效的）。
点击拇指向下，背景颜色将变为红色（这是有效的）。
如果已经单击了任何按钮，则单击竖起大拇指或竖起大拇指时，删除按钮的颜色并添加最新的单击。例如：我为一个消息气泡单击了竖起大拇指，然后再次单击同一消息气泡的竖起大拇指，在这种情况下，竖起大拇指的按钮颜色应该被删除并设置为默认值，而竖起大拇指的颜色应该附加，反之亦然。

我在这里粘贴代码sn-p：

const activityStatusMiddleware = () => next => args => {
            const { activity, activity: { from: { role }, value }, sendState, sameTimestampGroup } = args;
            const reactionButtons = document.body.getElementsByClassName( 'botActivityDecorator__button' );
            window.handleEvent = function(event) {
                const { srcElement: { classList, textContent }, type } = event;
                if (type === 'click') {
                    switch (textContent) {
                        case '????':
                            if (!event.srcElement.classList.contains( 'reaction_positive' )) {
                                event.srcElement.classList.add( 'reaction_positive' )
                            }
                        break;
                        case '????':
                            if (!event.srcElement.classList.contains( 'reaction_negative' )) {
                                event.srcElement.classList.add( 'reaction_negative' )
                            }
                        break;
                        default:
                            event.srcElement.classList.remove( 'reaction_positive' )
                            event.srcElement.classList.remove( 'reaction_negative' )
                    }
                }
            }
            for ( let i = 0; i <= reactionButtons.length - 1; i++ ) {
                reactionButtons[ i ].addEventListener( 'click', window, false)
            }

【问题讨论】：

我是在您引用的上述链接中帮助提供解决方案的同一个人。我将更新该问题以反映新代码。
接受/赞成一个答案服务于更大的 Stack Overflow 社区和任何有类似问题的人。如果您觉得我的回答足够，请“接受”并点赞。如果没有，请告诉我我还能提供哪些帮助！

标签： reactjs botframework direct-line-botframework web-chat

【解决方案1】：

这是我使用的代码（放在activityStatusMiddleware() 中）。它允许根据机器人响应在赞成投票和反对投票之间切换。

if (role === 'bot') {
  const reactionBtns = document.querySelectorAll( '.botActivityDecorator__button' );
  let btnIndex = 0
  if (reactionBtns.length > 0) {
    for (let i = 0; i <= reactionBtns.length - 1; i++) {
      reactionBtns[ i ].onclick = () => {
        if (reactionBtns[ i ].classList.contains( 'reaction_positive' ) && reactionBtns[ i ].innerText === '?') {
          reactionBtns[ i ].classList.remove( 'reaction_positive' );
        } else if (!reactionBtns[ i ].classList.contains( 'reaction_positive' ) && reactionBtns[ i ].innerText === '?') {
          reactionBtns[ i ].classList.add( 'reaction_positive' );
          reactionBtns[ i + 1 ].classList.remove( 'reaction_negative' );
        }

        if (reactionBtns[ i ].classList.contains( 'reaction_negative' ) && reactionBtns[ i ].innerText === '?') {
          reactionBtns[ i ].classList.remove( 'reaction_negative' );
        } else if (!reactionBtns[ i ].classList.contains( 'reaction_negative' ) && reactionBtns[ i ].innerText === '?') {
          reactionBtns[ i ].classList.add( 'reaction_negative' );
          reactionBtns[ i - 1 ].classList.remove( 'reaction_positive' );
        }
      }
    }
  }
}

希望有帮助！

【讨论】：