处理单击事件并在react webchat上切换按钮颜色

Question

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

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

1. 竖起大拇指，背景颜色变为绿色（正在运行）。
2. 大拇指的背景颜色已变为红色（正在运行）。
3. 竖起大拇指或不竖起大拇指（如果已单击任何按钮），请删除按钮的颜色并添加最新的点击。例如：我单击了一个消息气泡的大拇指，然后再次单击了相同消息气泡的大拇指，在这种情况下，应该删除大拇指按钮的颜色，并将其设置为默认值，并且应该追加大拇指颜色，反之亦然。

我在这里粘贴代码段：

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)
            }

Answer 1

这是我使用的代码。根据机器人的响应，它允许在赞成与反对之间进行切换。

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' );
        }
      }
    }
  }
}

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9ITVljei5naWYifQ==” alt =“在此处输入图像描述”>

希望获得帮助！