React点击单个Div添加类而非全部Div的问题求助

你的代码里所有div共用了同一个hoverToggle状态，所以只要状态变化，所有div的类名都会同步改变。要实现点击单个div仅切换自身类名，需要用状态记录具体被点击的元素标识，比如索引或ID。

方案一：单选模式（仅能选中一个div） #

这种模式下同一时间只有一个div会被添加getClick类：

import { useState } from 'react';

export default function Toggle() {
  // 记录当前选中的div索引，初始为null表示无选中项
  const [activeIndex, setActiveIndex] = useState(null);

  const toggleIt = (index) => {
    // 点击当前选中的div则取消选中，否则设置为当前索引
    setActiveIndex(prev => prev === index ? null : index);
  };

  return (
    <>
      <div
        onClick={() => toggleIt(0)}
        className={activeIndex === 0 ? "getClick" : "noClick"}
      >
        This is DIV 1
      </div>
      <div
        onClick={() => toggleIt(1)}
        className={activeIndex === 1 ? "getClick" : "noClick"}
      >
        This is DIV 2 
      </div>
      <div
        onClick={() => toggleIt(2)}
        className={activeIndex === 2 ? "getClick" : "noClick"}
      >
        This is DIV 3
      </div>
    </>
  )
}

方案二：多选模式（可同时选中多个div） #

如果需要支持多个div同时处于选中状态，可以用数组记录所有选中的索引：

import { useState } from 'react';

export default function Toggle() {
  // 存储所有选中的div索引
  const [activeIndices, setActiveIndices] = useState([]);

  const toggleIt = (index) => {
    setActiveIndices(prev => {
      // 当前索引已选中则移除，否则添加进数组
      return prev.includes(index) 
        ? prev.filter(i => i !== index) 
        : [...prev, index];
    });
  };

  return (
    <>
      <div
        onClick={() => toggleIt(0)}
        className={activeIndices.includes(0) ? "getClick" : "noClick"}
      >
        This is DIV 1
      </div>
      <div
        onClick={() => toggleIt(1)}
        className={activeIndices.includes(1) ? "getClick" : "noClick"}
      >
        This is DIV 2 
      </div>
      <div
        onClick={() => toggleIt(2)}
        className={activeIndices.includes(2) ? "getClick" : "noClick"}
      >
        This is DIV 3
      </div>
    </>
  )
}

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