在单击按钮时，使用reactjs更改所单击按钮的类名以及该组中的其他按钮

import React, { useState } from 'react';

const ButtonGroup = () => {
  const [activeButton, setActiveButton] = useState(null);

  const handleButtonClick = (buttonName) => {
    setActiveButton(buttonName);
  };

  return (
    <div>
      <button
        className={activeButton === 'button1' ? 'active' : ''}
        onClick={() => handleButtonClick('button1')}
      >
        Button 1
      </button>
      <button
        className={activeButton === 'button2' ? 'active' : ''}
        onClick={() => handleButtonClick('button2')}
      >
        Button 2
      </button>
      <button
        className={activeButton === 'button3' ? 'active' : ''}
        onClick={() => handleButtonClick('button3')}
      >
        Button 3
      </button>
    </div>
  );
};

export default ButtonGroup;