如何在每個圖標上分別更改顏色 onClick？ 反應，樣式化的組件

Question

我正在學習反應和樣式組件。 我堆棧試圖單獨更改每個圖標的顏色。 有什么解決辦法嗎？

這是我想要得到的：

https://i.stack.imgur.com/tsANO.jpg

這是我的代碼示例：

import React, { useState } from "react";
import styled from "styled-components";
import {
  GiSteak,
  GiCheeseWedge,
  GiFlatfish,
  GiChickenOven,
  GiBroccoli,
} from "react-icons/gi";

const StyledDiv = styled.div`
  width: 300px;
  div {
    font-size: 30px;
    color: #828282;
    color: ${({ color }) => (color ? "green" : "lightGrey")};
  }
`;

const Selections = () => {
  const [color, setColor] = useState(false);
  return (
    <StyledDiv color={color} onClick={() => setColor(!color)}>
      <p>Select your options</p>
      <div>
        <GiBroccoli />
        <GiCheeseWedge />
        <GiSteak />
        <GiFlatfish />
        <GiChickenOven />
      </div>
    </StyledDiv>

  );
};

Answer 1

您實際上是在詢問如何處理多個狀態（因此與styled-components無關），因為現在您對所有圖標都有一個 state ，每個圖標都需要一個 state 。

這是一種可能的解決方案，管理單個圖標狀態數組：

const Icon = styled.div`
  background-color: ${({ isColored }) => (isColored ? "green" : "lightGrey")};
`;

const StyledDiv = styled.div`
  width: 500px;
  .icon__box {
    display: flex;
    ${Icon} {
      border: 1px solid black;
      font-size: 30px;
      margin-right: 10px;
    }
  }
`;

const Icons = () => {
  const [areColored, setColor] = useState(Array(5).fill(false));
  console.log(areColored);
  return (
    <StyledDiv>
      <p>Select your options</p>
      <div className="icon__box">
        {areColored.map((isColored, index) => (
          <Icon
            key={index}
            isColored={isColored}
            onClick={() =>
              setColor((prev) => {
                const res = Object.assign([], prev, { [index]: !prev[index] });
                return res;
              })
            }
          >
            icon {index + 1}
          </Icon>
        ))}
      </div>
    </StyledDiv>
  );
};

• 查看類似問題

Answer 2

嘿，您可以使用icon state 存儲像{index:1,color:true}這樣的 object 結構。 將其與nth-child(...) css 選擇器結合使用，您可以像這樣完成任務：-

import React, { useState } from "react";
import styled from "styled-components";

const StyledDiv = styled.div`
  width: 500px;
  .icon__box{
    display: flex;
    div {
      border: 1px solid black;
      font-size: 30px;
      margin-right: 10px;
      background-color:lightgrey
    }
    div:nth-child(${({icon})=>icon.index+1}){
      background-color: ${({ icon }) => (icon.color ? "green" : "lightGrey")};
    }
  }
`;

const Icons = () => {
  const [icon, setIcon] = useState({index:0,color:false});
  const [icons] = useState(['icon1','icon2','icon3','icon4','icon5']);
  const handleClick=(index)=>{
     let newIcon = {...icon}
     newIcon.color = index!==newIcon.index?true:!newIcon.color;
     newIcon.index = index;
     setIcon(newIcon);
  }

  return (
    <StyledDiv icon={icon}>
      <p>Select your options</p>
      <div className="icon__box">
        {icons.map((icon,index)=>(<div onClick={()=>handleClick(index)}>{icon}</div>))}
      </div>
    </StyledDiv>
  );
};

export default Icons;

這是分叉的：-

注意：這里我為每個圖標 div 的文本內容制作了一個icons state。 如果您從props派生上述內容，它將以相同的方式工作。 所以這取決於你。