Javascript React-toggle类：useState钩子形成多个按钮

我有一些按钮，我正在尝试为单击的按钮添加

active

类。但当我点击其中一个按钮时，所有的按钮都被激活了

const { useState } = React;
const { render } = ReactDOM;
const node = document.getElementById("root");

const Button = ({ message }) => {
  const [condition, setCondition] = useState(false);
  return (
    <div>
    {
    Object.keys(res).map((data) => (
    <Button className={condition ? "button toggled" : "button"} onClick=. 
     {() => {
      setCondition(!condition)}
     }}
     ))
      }
    </div>
  );
   //Updated
   Object.keys(res).map((data) => (
    <Button className={condition ? "button toggled" : "button"} onClick=. 
     {() => {
      setCondition(condition === "off" ? "on" : "off")}
     }}
     ))
      }
    </div>
  ); //This can be modified to work for button clicked. Because active class is added to all buttons, if one of them is clicked
};
render(<Button message="Click me if you dare!" />, node);

const{useState}=React；
const{render}=ReactDOM；
const node=document.getElementById（“根”）；
常量按钮=（{message}）=>{
const[condition，setCondition]=useState（false）；
返回(
{
Object.keys（res.map）（（数据）=>(
{
setCondition（！condition）}
}}
))
}
);
//更新
Object.keys（res.map）（（数据）=>(
{
setCondition（条件==“关闭”？“打开”：“关闭”）}
}}
))
}
); //这可以修改为适用于单击的按钮。因为活动类被添加到所有按钮中，如果单击其中一个按钮
};
渲染（，节点）；

---

如果我单击第一个按钮，这将起作用，但如果我再次单击同一按钮，则应删除此活动类

您需要为每个按钮使用单独的状态处理程序：

const Button = ({ message }) => {
 const [condition, setCondition] = useState(false);
 const [condition2, setCondition2] = useState(false);
  return (
    <div>
    <div
      onClick={() => setCondition(!condition)}
      className={condition ? "button toggled" : "button"}
    >
      {message}
    </div>  
      <div
      onClick={() => setCondition(!condition2)}
      className={condition2 ? "button toggled" : "button"}
    >
      {message}
    </div>  
    </div>
  );
};

render(<Button message="Click me if you dare!" />, node);

const按钮=（{message}）=>{
const[condition，setCondition]=useState（false）；
const[condition2，setCondition2]=useState（false）；
返回(
setCondition（！condition）}
className={条件？“按钮已切换”：“按钮”}
>
{message}
setCondition（！condition2）}
className={condition2？“按钮已切换”：“按钮”}
>
{message}
);
};
渲染（，节点）；

这是一个非常简单的解决方案，但它将帮助您了解问题所在

如果你在一个真实的项目中，我建议你使用一个现有的库（可以通过搜索

react toggle button group

找到）

import React，{useState}来自“React”；
常量默认按钮=[
{id:1}，
{id:2}，
{id:3}，
{id:4}
];
导出默认函数App（）{
const[toggledButtonId，setToggledButtonId]=useState（null）；
功能切换按钮（按钮）{
setToggledButtonId（button.id）；
}
返回(
{defaultButtons.map（按钮=>{
const isToggled=button.id==toggledButtonId；
返回(
切换按钮（按钮）}>
{String（isToggled）}
)
})}
)
}

也许您想检查一下

---

您可以在中创建状态为的组件按钮，并使用此组件填充按钮。可能您可以使用：activecss选择器并完全避免js

导入React，{useState，useCallback}来自“React”；
import React, {useState, useCallback} from "react";

const defaultButtons = [
    {id: 1},
    {id: 2},
    {id: 3},
    {id: 4}
];

export default function App() {
    const [toggledButtonId, setToggledButtonId] = useState(false);

    function toggleButton(button) {
        setToggledButtonId(button.id);
    }
      const toggleButton = useCallback((id) => setToggledButtonId(state => id), [toggledButtonId]);

    return (
        <div>
            {defaultButtons.map(button => {
                const isToggled = button.id === toggledButtonId;
                return (
                    <button
                        key={button.id}
                        className={isToggled ? "toggledButtonId toggled" : "toggledButtonId"}
                        onClick={toggleButton(button.id)}>
                        {String(isToggled)}
                    </button>
                )
            })}
        </div>
    )
}

常量默认按钮=[
{id:1}，
{id:2}，
{id:3}，
{id:4}
];
导出默认函数App（）{
const[toggledButtonId，setToggledButtonId]=useState（false）；
功能切换按钮（按钮）{
setToggledButtonId（button.id）；
}
const-toggleButton=useCallback（（id）=>setToggledButtonId（state=>id），[toggledButtonId]）；
返回(
{defaultButtons.map（按钮=>{
const isToggled=button.id==toggledButtonId；
返回(
{String（isToggled）}
)
})}
)
}

只需为每个附加按钮使用另一个状态变量我已经编辑了我的问题对不起，按钮是从

对象中计数的。键（数据）

我认为对象中的键数可以是动态的？@Chris yes。它们可以是动态的，当您想将状态变量从布尔值更改为具有键值对的对象时，该键值对将与您的对象的键值对相对应。我已编辑了我的问题对不起，按钮是从

对象中计数的。键（数据）

可能更好的修改方法是仅对单击的按钮有效，并非所有``const[condition，setCondition]=useState（“off”）；Object.keys（res.map（（数据）=>（{setCondition（condition==“off”？“on”：“off”）}）```@RexepRexepi您的代码不起作用，因为您对每个按钮使用相同的标志。这就是我使用id的原因，因为它最多会在此

按钮上切换一个按钮。id

defaultButtons

？？我试过你的方法，但我得到了错误，按钮没有定义

import React, {useState, useCallback} from "react";

const defaultButtons = [
    {id: 1},
    {id: 2},
    {id: 3},
    {id: 4}
];

export default function App() {
    const [toggledButtonId, setToggledButtonId] = useState(false);

    function toggleButton(button) {
        setToggledButtonId(button.id);
    }
      const toggleButton = useCallback((id) => setToggledButtonId(state => id), [toggledButtonId]);

    return (
        <div>
            {defaultButtons.map(button => {
                const isToggled = button.id === toggledButtonId;
                return (
                    <button
                        key={button.id}
                        className={isToggled ? "toggledButtonId toggled" : "toggledButtonId"}
                        onClick={toggleButton(button.id)}>
                        {String(isToggled)}
                    </button>
                )
            })}
        </div>
    )
}