React实现多toggle按钮点击后变暗提示选中状态的方法

你的现有代码中状态切换的逻辑已经正确，只需要补全自定义激活状态的样式匹配规则，也可以进一步优化重复的按钮渲染逻辑，具体修改如下：

1. 组件代码优化（可选，减少冗余代码） #

可以把按钮配置抽成公共数组统一渲染，后续新增按钮只需要修改数组配置即可，不需要重复编写点击事件和状态判断：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  // 按钮配置列表
  const btnOptions = ["first", "Second", "Third"];
  const [active, setActive] = useState("first");

  return (
    <div className="App"> 
      {btnOptions.map(btnText => (
        <button 
          key={btnText}
          className={`button ${active === btnText ? 'active' : ''}`}
          onClick={() => setActive(btnText)}
        >
          {btnText}
        </button>
      ))}
    </div>
  );
}

如果你不想修改原有结构，保持你现有写法也能正常运行，只需要把每个按钮上的active={active === xxx}属性改为动态拼接className即可，不需要修改onClick逻辑。

2. 编写激活状态样式 #

在styles.css中添加激活状态的变暗样式：

/* 按钮基础样式，可根据你的需求自行调整 */
.button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  margin: 0 6px;
  cursor: pointer;
  background-color: #1677ff;
  color: #fff;
}
/* 激活状态变暗效果 */
.button.active {
  background-color: #0e4299;
  opacity: 0.7;
}

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