如何在React应用中实现两个按钮的交替变色切换功能？

要实现两个按钮的互斥颜色切换（点击一个按钮时自身变色，另一个恢复原色），你当前用单个布尔值toggle的方式存在局限性——它只能区分两种状态，但无法明确标识哪个按钮处于激活状态。可以通过以下方式优化：

实现思路 #

用状态记录当前选中的按钮标识（比如字符串类型），点击按钮时更新该标识为当前按钮的唯一值；渲染时根据标识判断按钮是否处于选中状态，从而应用不同的样式。

完整代码示例 #

import { useState } from 'react';

function ToggleButtons() {
  // 用状态保存当前选中的按钮标识，初始为null表示无选中
  const [selectedButton, setSelectedButton] = useState(null);

  // 点击事件处理函数，接收按钮标识作为参数
  const handleButtonClick = (btnId) => {
    setSelectedButton(btnId);
    // 可选：如果需要点击已选中按钮取消高亮，可添加以下逻辑
    // if (selectedButton === btnId) {
    //   setSelectedButton(null);
    //   return;
    // }
  };

  // 定义默认和选中样式
  const defaultStyle = {
    padding: '8px 16px',
    margin: '0 8px',
    border: '1px solid #ccc',
    borderRadius: '4px',
    backgroundColor: '#fff',
    cursor: 'pointer'
  };

  const activeStyle = {
    ...defaultStyle,
    backgroundColor: '#2196F3',
    color: '#fff',
    borderColor: '#2196F3'
  };

  return (
    <div>
      <button
        onClick={() => handleButtonClick('btn1')}
        style={selectedButton === 'btn1' ? activeStyle : defaultStyle}
      >
        Button1
      </button>
      <button
        onClick={() => handleButtonClick('btn2')}
        style={selectedButton === 'btn2' ? activeStyle : defaultStyle}
      >
        Button2
      </button>
    </div>
  );
}

export default ToggleButtons;

代码说明 #

• 状态管理：selectedButton记录当前选中的按钮ID，初始值null表示没有按钮被选中。
• 点击逻辑：点击按钮时调用handleButtonClick，传入当前按钮的标识（btn1/btn2），更新状态为该标识。
• 样式控制：每个按钮根据selectedButton是否等于自身标识，切换应用高亮样式或默认样式，实现互斥切换效果。

扩展提示 #

如果后续需要添加更多按钮，只需给新按钮分配唯一标识，复用handleButtonClick函数即可，无需修改状态逻辑，扩展性更强。

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