Javascript 只选择一个复选框功能

我想弄清楚我的代码是错的还是bug。我认为没有问题，但它不起作用

<input checked={checked} />

我使用的代码是：

<input checked={checked} />

class ItemView扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
选项：[{
id:1，
名称：“项目1”
},
{
id:2，
名称：“项目2”
}],
选择：2
}
}
切换复选框（e）{
console.log（e.target.id）
if（this.state.options selected==e.target.id）{
这是我的国家({
选择的选项：未定义
})
}否则{
this.setState（{optionSelected:e.target.id}）
}
}
render（）{
返回(
this.toggleCheckbox（e）}/>
)
}
}
const ItemList=（{options，optionSelected，toggleCheckbox}）=>{
返回(
{
options.map（（选项，索引）=>(
))
}
)
}
常量项=（{option，checked，toggleCheckbox}）=>{
返回(

{option.id}.{option.name}

<input checked={checked} />

)
}

代码说明： 使用

物化css

对代码进行反应

<input checked={checked} />

这是一个具有多个项目的简单复选框功能，仅限于选择一个项目。因此，如果我选中其中一项，除我刚才选择的项目外，所有项目都将自动取消选中。如果我取消选中刚刚选中的内容，则每个项目都将保持未选中状态

<input checked={checked} />

核心逻辑是：在

组件中，有一个条件道具，用于确定是否必须检查每个项目。它比较id，并将

true

或

false

交给其子项。在

组件中使用

选中的
道具来设置
的
选中的
属性

<input checked={checked} />

奇怪的是，当我在初始状态下设置默认选项时，当我刚刚运行应用程序时，check特性就像我所期望的那样工作。但如果我点击其中一个，它就不起作用了

<input checked={checked} />

它有什么问题？
e.target.id
是一个
字符串
，而
索引
是一个数字。当您进行
==
比较时，也会检查类型，并且这些类型不相同。这会导致在初始状态（您将自己设置为int）之后checked始终为false
您可以检查所选选项是否为选中选项，如下所示：

checked={optionSelected === option.id}

<input checked={checked} />

然后，您只需将其输入到您的输入中，如下所示：

<input checked={checked} />

类项目视图扩展了React.Component{
<input checked={checked} />

建造师（道具）{
超级（道具）
此.state={
选项：[{
id:1，
名称：“项目1”
},
{
id:2，
名称：“项目2”
}],
选择：2
}
}
切换复选框（e）{
这是我的国家({
选择的选项：e.target.id
})
}
render（）{
返回(
this.toggleCheckbox（e）}/>
)
}
}
const ItemList=（{options，optionSelected，toggleCheckbox}）=>{
返回(
{
options.map（（选项，索引）=>(
))
}
)
}
常量项=（{option，checked，toggleCheckbox，optionSelected}）=>{
返回(

{option.id}.{option.name}

<input checked={checked} />

)
}
函数tick（）{
ReactDOM.render(
,
document.getElementById（'root'））
);
}
勾选（）

复制粘贴并运行
我认为您应该尝试使用refs，id不能很好地使用refs，这是一个很好的观点。我忘记了
id
属性是一个
string
值。非常感谢。
<input checked={checked} />