React WebChat反馈按钮点击互斥状态切换问题求助

Let's work through this toggle issue you're hitting with the thumbs up/down feedback buttons. The core problem right now is that when you switch from one button to the other on the same message bubble, you're only updating the clicked button's styling but not clearing the active state from the first button. Here's how to fix that:

Core Solution Idea #

When a button is clicked, first target only the two reaction buttons in the same message container, clear any existing active classes from both, then apply the appropriate highlight class to the button you just clicked. This ensures only one button is highlighted per message at a time.

Modified Code Snippet #

const activityStatusMiddleware = () => next => args => {
  const { activity, activity: { from: { role }, value }, sendState, sameTimestampGroup } = args;
  const reactionButtons = document.body.getElementsByClassName('botActivityDecorator__button');

  // Define the click handler locally to avoid global scope pollution
  const handleReactionClick = function(event) {
    const { srcElement: clickedButton, type } = event;
    if (type !== 'click') return;

    // Find the parent container that holds both reaction buttons for this specific message
    // Adjust the selector if your DOM structure uses a different class for message bubbles
    const messageContainer = clickedButton.closest('.botActivityDecorator');
    
    if (!messageContainer) return;

    // Grab both reaction buttons inside this message bubble
    const messageReactionButtons = messageContainer.querySelectorAll('.botActivityDecorator__button');

    // Reset: Clear active classes from both buttons first
    messageReactionButtons.forEach(btn => {
      btn.classList.remove('reaction_positive', 'reaction_negative');
    });

    // Apply the correct class based on which button was clicked
    const buttonText = clickedButton.textContent;
    if (buttonText === '') {
      clickedButton.classList.add('reaction_positive');
    } else if (buttonText === '') {
      clickedButton.classList.add('reaction_negative');
    }
  }

  // Remove old listeners first to prevent duplicate click handlers (common in middleware)
  for (let i = 0; i < reactionButtons.length; i++) {
    reactionButtons[i].removeEventListener('click', handleReactionClick);
    reactionButtons[i].addEventListener('click', handleReactionClick, false);
  }

  return next(args);
};

What Changed & Why #

1. Scoped to the Message Bubble: Using closest('.botActivityDecorator') ensures we only modify buttons in the same message, not every reaction button on the page. Update the selector if your message containers use a different class name.
2. Full Reset Before Applying New Style: We clear both active classes from both buttons first, so there's no leftover styling from previous clicks.
3. Avoid Global Function Pollution: The click handler is defined inside the middleware instead of on window, which is cleaner and avoids conflicts.
4. Prevent Duplicate Event Listeners: We remove existing listeners before adding new ones—this stops multiple handlers from firing on a single click, a common issue when middleware runs multiple times.

Quick Note for React Best Practices #

If you plan to move away from a temporary solution later, consider managing the reaction state with React's built-in state instead of direct DOM manipulation. But for your current use case, this fix should resolve the toggle behavior issue cleanly.

内容的提问来源于stack exchange，提问作者Bradraj kumar