将样式更改为单个项目 React-Hooks答案

【问题标题】：Change style to individual item React-Hooks将样式更改为单个项目 React-Hooks
【发布时间】：2022-02-08 07:26:13
【问题描述】：

我想创建一个按钮，当您单击它时，它会打开一个具有不同颜色的导航栏，当用户按下其中一种颜色时，导航栏会关闭，并且它自己的按钮会采用用户单击的颜色。

我的代码有效，但结果与我的预期不同

这就是结果

绿点一下子变了，我希望只有我点击的项目上的点会改变颜色

这是代码

    const colorLevelArr = ["rgb(236, 77, 77)", "rgb(241, 153, 70)", "rgb(255, 253, 151)", "rgb(147, 241, 135)","rgb(132, 220, 255)"];
    const [colorLevel, setColorLevel] = useState([]);
    const [colorLevelOpen, setcolorLevelOpen] = useState(null);
    
    const toggelColorLevel = (item) => {
    setcolorLevelOpen(preOpen => preOpen === item ? null : item)
}
const changeColorLevel = (index, item) => {
    setColorLevel(colorLevelArr[index])
    setcolorLevelOpen(preOpen => preOpen === item ? null : item)
}

这是按钮的代码

<button className="color_level_container"
onClick={() => toggelColorLevel(item)}
style={{
  backgroundColor:`${colorLevel}`,
      }}>
   {colorLevelOpen === item && (
   <div className="color_btn_container">
           {colorLevelArr.map((colorLevel, index)=>{
               return (
                  <div onClick={()=>{
                      toggelColorLevel(item)
                      changeColorLevel(index, item)
                      }
                  }
                   style={{
                       borderRadius:"100%",
                       border:"1px solid black",
                       width:"15px",
                       height:"15px",
                       backgroundColor:`${colorLevel}`,
                   }}>                                                                            
                  </div>
               ) 
           })}
        </div>
        )}
        
    
</button>

如果有人可以帮助我了解如何正确地做，

唯一的颜色变化将是我按下的项目

提前谢谢你

【问题讨论】：

标签： javascript css reactjs react-hooks

【解决方案1】：

看起来您正在为颜色使用一种状态，并将其用于所有项目。修复它的最简单方法是为每个按钮创建不同的状态，这样每个按钮都有自己的颜色。这可以通过为按钮创建一个包含颜色状态的组件来完成，当状态发生变化时，当前组件的颜色会相应地改变，并且不会影响其他按钮组件。

我写了一个小例子让你理解这个想法：

const colorsList = ['red', 'yellow', 'blue', 'green'];

const App = () => {
  return (
    <div style={{ margin: '100px' }}>
      <ChangingColorButton />
      <ChangingColorButton />
      <ChangingColorButton />
      <ChangingColorButton />
    </div>
  );
};

const ChangingColorButton = () => {
  const [color, setColor] = useState('black');

  return (
    <button
      onClick={() => setColor(colorsList[Math.floor(Math.random() * 3) + 1])}
      style={{ backgroundColor: color, marginRight: '8px' }}>
      Click to change color
    </button>
  );
};

如您所见，我有一个颜色列表，通过单击每个按钮，其背景颜色会更改为列表中的随机颜色。

此示例演示如何分别控制每个按钮的每种颜色。

【讨论】：