通过单击反应更改div的背景颜色答案

【问题标题】：Change background color of div by clicking in react通过单击反应更改div的背景颜色
【发布时间】：2022-11-22 14:59:24
【问题描述】：

我在组件中有三个 div（也可以超过三个）。我想在单击它们时更改它们的颜色。如果我再次单击，它们将恢复原来的颜色。在我的代码中，如果我单击任何一个 div，所有 div 都会发生变化，你能帮我为特定的 div 做吗？代码是：

import React,{useState} from 'react'

export default function ChangeColor() {
   let [colorState,changeState]=useState(['red','green','blue']);
   let [isActive,setIsActive]=useState(true);

  return (
    <>
      {colorState.map((color,index)=>{      
        return(
        <React.Fragment key={index}>            
           <div style={{width:'100px',height:'100px',backgroundColor:isActive?`${color}`:'yellow' }} 
           onClick={()=>{isActive?setIsActive(false) :setIsActive(true)}}>
             <p>{color}</p>
           </div>
        </React.Fragment>
      )})
      }
   
    </>
  )
}

【问题讨论】：

标签： reactjs onclick background-color

【解决方案1】：

所有 3 div 一起改变，因为只有一个值用于控制状态。

为了解决这个问题，你可以让isActive成为一个对象，每个color都包含一个Boolean值，所以它的结构可能是这样的：

{red: true, green: false, blue: false}

这样，每个div 都可以根据条件设置样式，例如：

backgroundColor: isActive[color] ? 'yellow' : color

完整示例：（stackblitz 上的现场演示）

import React, { useState } from 'react';

export default function ChangeColor() {
  const [colorState, changeState] = useState(['red', 'green', 'blue']);
  const [isActive, setIsActive] = useState({});

  const toggleActive = (color) =>
    setIsActive((prev) => {
      if (prev[color]) return { ...prev, [color]: false };
      return { ...prev, [color]: true };
    });

  return (
    <>
      {colorState.map((color, index) => {
        return (
          <React.Fragment key={index}>
            <div
              style={{
                width: '100px',
                height: '100px',
                backgroundColor: isActive[color] ? 'yellow' : color,
                cursor: 'pointer',
              }}
              onClick={() => toggleActive(color)}
            >
              <p>{isActive[color] ? 'yellow' : color}</p>
            </div>
          </React.Fragment>
        );
      })}
    </>
  );
}

【讨论】：