Javascript 在Reactjs中管理状态时遇到问题

我一直在练习JavaScript和ReactJs，有一段时间我一直在解决一个问题。基本上，我正在尝试使用ReactJs重写我的HTML、CSS和Javascript项目

这是我的问题：（关于React代码）。假设我单击问题1的第一个答案选项，类名随之更改，样式更改（背景变为黑色）和isClicked变为真（两者都是EachHindividualAnswer类中的状态）。如果然后单击第二个答案选项，我希望第一个答案选项（以及该问题的每个其他答案选项）的样式为空，并且isclick为false，只有第二个答案的isclick==true和className=“clicked”。

希望这是有意义的。很抱歉发送了这么多文件，不知道其他方法

谢谢

我的HTML、CSS和JAVASCRIPT代码。（我正试图用ReactJs重新编写的代码）

---

如果我理解正确，这里有一个可能的答案。我完全是在模仿这种情况，所以这对你来说不是一个完整的解决方案

类应用程序扩展了React.Component{
状态={
答案：[“1”、“19”、“21”、“90”、“1”]，
选定：{}，
}
handleClick=e=>{
const{answer}=e.target.dataset；
此.setState（{已选择：{
[答：！！答，
}})
};
render（）{
const{answers}=this.state；
console.log（this.state.selected）；
返回(

{
答案.map（答案=>
{答案}

)
}

);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
.colored{
颜色：红色；
}

您的问题中有很多代码。请试着在例如a中创建一个。当你尝试创建它时，@Tholle说了什么，你会犯什么错误？@Tholle，我的答案如何，包括我从你那里学到的技巧：）@Tholle，在看到你最后的答案后，我甚至改进了它。该死，我喜欢这样。通过尝试教学来学习：）嘿，谢谢你明确的回答。再次抱歉，代码太长，我不知道如何提问。我会尝试运用你的逻辑，但我有一些问题，需要澄清，因为我是一个非常新的反应。我将参考您的第一段代码。您编写了如下代码：const{answers}=this.state；在这种情况下，花括号是什么意思？而且{answers}同时接受答案和选定的状态，对吗？还有这意味着什么：这个.setState（{selected:{[answer]：！！answer，}}}）对我来说毫无意义，欢迎你。这次用不合适的方式问你的问题一点问题都没有。对于下一个问题，您现在知道如何做到这一点：）我已经编辑了我的答案，并为代码添加了解释。此外，我还添加了最后一个更适合您的代码示例。