Javascript 将类添加到React中的包含元素

我在react中有一个简单的组件，它有两个按钮。我只想在包含的div上设置一个类，具体取决于单击的按钮

组件（插件）js

import React，{useState}来自“React”；
功能插件（道具）{
const[isSelected，setSelected]=useState（false）；
const[notSelected，setNotneeded]=useState（false）；
const selectAddon=（）=>{
setSelected（！isSelected）；
setNotneeded（false）；
}
常数noAddon=（）=>{
SetNotRequired（！notSelected）；
已选择（假）；
}
返回(
{props.name}封面
每月{道具价格}
{props.description}

选择这个封面
我不需要这个
);
}
导出默认插件；

一个页面上有多个组件

import React, { useState } from 'react';
import AddOn from './AddOns';
import './App.css';

function App() {

  const [extras, setExtras] = useState([
    { name: "Cover 1", price: "1.05", description: "Description goes here", groupName: "lost", groupYes: "group-1", groupNo: "group-2" },
    { name: "Cover 2", price: "2.19", description: "Description goes here", groupName: "abroad", groupYes: "group-3", groupNo: "group-4"},
    { name: "Cover 3", price: "1.53", description: "Description goes here", groupName: "farewell", groupYes: "group-5", groupNo: "group-6" }
  ])

  return (
    <div className="app">
      {extras.map(extra =>(
        <AddOn name={extra.name} price={extra.price} description={extra.description}/>
      ))}
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
从“./AddOns”导入加载项；
导入“/App.css”；
函数App（）{
const[extras，setExtras]=useState([
{名称：“封面1”，价格：“1.05”，说明：“说明在这里”，组名：“丢失”，组是：“组1”，组号：“组2”}，
{名称：“封面2”，价格：“2.19”，说明：“说明在这里”，组名：“国外”，组是：“组3”，组号：“组4”}，
{名称：“封面3”，价格：“1.53”，说明：“说明在这里”，组名：“再见”，组是：“组5”，组号：“组6”}
])
返回(
{extras.map（extras=>(
))}
);
}
导出默认应用程序；

---

一个完全的新手的任何帮助都值得感谢

我建议为div类添加一个变量，然后更改noAddon和selectAddon函数中的值。

我的第一个想法是将className保持在状态，并在用户每次更改选择时更改状态。 编辑：刚才看到您正在尝试编辑另一个div的类名，也编辑了响应

 import React, { useState } from 'react';
    
      function AddOns(props) {
    
      const [buttonsClass, setButtonClass] = useState('addon');
      const [notSelected, setNotneeded] = useState(false);
    
      return (
        <div className="addon">
          <h2>{props.name} cover</h2>
          <h3>£{props.price} per month</h3>
          <p>{props.description} </p>
          <div className={buttonsClass}>
            <button role="radio" onClick={()=>{()=>setButtonClass('addon')}} className={isSelected ? "selected" : ""}>Select this cover</button>
            <button role="radio"onClick={()=>{()=>setButtonClass('noAddon')}} className={notSelected ? "selected" : ""}>I don't need this</button>
          </div>
        </div>
      );
    }
    
    export default AddOns;

import React，{useState}来自“React”；
功能插件（道具）{
const[buttonclass，setButtonClass]=useState（'addon'）；
const[notSelected，setNotneeded]=useState（false）；
返回(
{props.name}封面
每月{道具价格}
{props.description}

{（）=>setButtonClass（'addon'）}}className={isSelected？“selected”：“}>选择此封面
{（）=>setButtonClass（'noAddon'）}}className={notSelected？“selected”：“}>我不需要这个
);
}
导出默认插件；

跟踪按钮状态不需要使用两种状态。就用一个

请查看下面的详细信息。您可以使用

addonSelected

检查选择了哪个按钮

您可以根据状态设置不同的类名，就像为

按钮实现的那样

import React，{useState}来自“React”；
功能插件（道具）{
常量[addonSelected，setAddonSelected]=useState（null）；
const selectAddon=（）=>{
setAddonSelected（true）；
};
常数noAddon=（）=>{
setAddonSelected（假）；
};
返回(
{props.name}封面
每月{道具价格}
{props.description}

选择这个封面
我不需要这个
);
}
导出默认插件；
这两个按钮是否类似于单选按钮（单选）？另外，我不确定要在哪个div上设置类。是否要使用className按钮将类添加到div？谢谢。因此，我尝试根据单击的按钮，向包含div“addon”添加一个selected或notSelected类。只是似乎无法让它工作？再次感谢你看这个。首先，我需要将selected或notSelected类添加到div中，以保持原始的addOn类（因此将它们锁定）。另外，选择的第二个按钮是按钮的初始状态，我希望它们为空，用户必须选择on或其他。有什么想法吗？明白了。再次更新答案。太棒了！！！！非常感谢您的帮助，非常感谢=）
 import React, { useState } from 'react';
    
      function AddOns(props) {
    
      const [buttonsClass, setButtonClass] = useState('addon');
      const [notSelected, setNotneeded] = useState(false);
    
      return (
        <div className="addon">
          <h2>{props.name} cover</h2>
          <h3>£{props.price} per month</h3>
          <p>{props.description} </p>
          <div className={buttonsClass}>
            <button role="radio" onClick={()=>{()=>setButtonClass('addon')}} className={isSelected ? "selected" : ""}>Select this cover</button>
            <button role="radio"onClick={()=>{()=>setButtonClass('noAddon')}} className={notSelected ? "selected" : ""}>I don't need this</button>
          </div>
        </div>
      );
    }
    
    export default AddOns;