React中点击单个Div切换背景颜色问题求助

你的问题出在用单个isActive状态变量控制所有Div，所有Div都依赖这个全局变量判断颜色，所以点击任意一个都会同步改变所有Div的状态。要实现单个Div独立切换，需要给每个元素维护独立的激活状态，以下是修改后的代码：

import React, { useState } from 'react'

export default function ChangeColor() {
  const [colorState, changeState] = useState(['red', 'green', 'blue']);
  // 用数组记录每个Div的激活状态，初始都为true（显示原颜色）
  const [activeStates, setActiveStates] = useState(colorState.map(() => true));

  const handleClick = (index) => {
    // 复制当前状态数组，避免直接修改原数组
    const newActiveStates = [...activeStates];
    // 切换对应索引的激活状态
    newActiveStates[index] = !newActiveStates[index];
    setActiveStates(newActiveStates);
  }

  return (
    <>
      {colorState.map((color, index) => {      
        return (
          <div 
            key={index}
            style={{
              width: '100px',
              height: '100px',
              backgroundColor: activeStates[index] ? color : 'yellow',
              margin: '10px' // 增加间距方便区分每个Div
            }} 
            onClick={() => handleClick(index)}
          >
            <p>{color}</p>
          </div>
        )
      })}
    </>
  )
}

关键改动说明： #

• 将单个isActive变量替换为数组activeStates，数组中每个元素对应一个Div的激活状态，初始值全为true（对应显示原颜色）。
• 新增handleClick函数，接收点击Div的索引，通过复制状态数组并切换对应索引的状态值，实现只更新当前点击Div的状态。
• 每个Div的背景色判断改为依赖activeStates[index]，点击时传入当前索引，确保只有被点击的Div切换颜色。

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