通過單擊反應更改div的背景顏色

Question

我在組件中有三個 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>
      )})
      }
   
    </>
  )
}

Answer 1

所有 3 個div一起變化，因為只有一個值用於控制 state。

要解決這個問題，您可以將isActive設置為 object ，其中包含每種color的Boolean值，因此其結構可能如下所示：

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

這樣，每個div都可以根據以下條件設置 styles：

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>
        );
      })}
    </>
  );
}