React JS点击单个元素激活其余禁用的实现问题求助

Hey，这是React状态管理里很常见的小坑！你现在的问题是用了一个统一的布尔值isActive来控制所有元素的样式，点击任何一个元素都会把这个全局状态改成true，结果所有元素都触发了激活样式，自然全变红了。

要实现「点谁谁激活，其他恢复默认」的效果，我们需要记录当前激活元素的唯一标识（比如它的索引、或者名称本身），而不是用一个通用的开关。下面是具体的修复步骤和代码：

1. 重构状态定义 #

把原来的布尔状态改成记录激活项的标识，比如用索引（如果你的名称可能重复，索引是最稳妥的）：

// 初始状态设为null，表示一开始没有任何激活项
const [activeIndex, setActiveIndex] = useState(null);

如果你的names数组里每个名称都是唯一的，也可以直接用名称当标识：

const [activeName, setActiveName] = useState(null);

2. 调整点击事件 #

点击元素时，把状态更新为当前元素的索引（或名称）：

// 用索引的情况
const handleClick = (index) => {
  setActiveIndex(index);
};

// 用名称的情况
const handleClick = (name) => {
  setActiveName(name);
};

3. 动态判断激活样式 #

遍历渲染每个元素时，判断它是否是当前激活项，再决定样式：

// 以索引为例的渲染逻辑
{names.map((name, index) => (
  <div
    key={index}
    onClick={() => handleClick(index)}
    style={{
      padding: "10px",
      margin: "5px",
      backgroundColor: activeIndex === index ? "red" : "white",
      border: "1px solid #ddd",
      cursor: "pointer"
    }}
  >
    {name}
  </div>
))}

完整修复后的代码 #

import { useState } from "react";

export default function App() {
  const names = ["name 1", "name 2", "name 3", "name 4"];
  const [activeIndex, setActiveIndex] = useState(null);

  const handleClick = (index) => {
    setActiveIndex(index);
  };

  return (
    <div className="App">
      {names.map((name, index) => (
        <div
          key={index}
          onClick={() => handleClick(index)}
          style={{
            padding: "10px",
            margin: "5px 0",
            backgroundColor: activeIndex === index ? "red" : "#fff",
            border: "1px solid #ccc",
            borderRadius: "4px",
            cursor: "pointer",
            transition: "background-color 0.2s"
          }}
        >
          {name}
        </div>
      ))}
    </div>
  );
}

原理说明 #

原来的布尔状态是所有元素共享的“全局开关”，只要状态变了，所有元素都会跟着改；现在我们用具体的标识来区分每个元素，只有当元素的标识和状态里记录的一致时，才会应用激活样式，这样就精准实现了单选激活的效果。

如果你的名称都是唯一的，用activeName的逻辑也完全可行，只需要把判断条件改成activeName === name就行，这样代码会更语义化~

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