Javascript 在reactjs中使用map函数时，如何将defaultChecked设置为仅第一个输入单选按钮

我试图使用defaultChecked-in-reactjs，当我只使用一个单选按钮的映射函数时。但是我怎样才能完成它呢

{colors.map((color, index) => {
      return (
        <label className="color-checkmark" key={index}>
          <input
            type="radio"
            checked="checked"
            name="color"
            value={color}
            // defaultChecked
          />
        </label>
      );
    })}

{colors.map（（颜色，索引）=>{
返回(
);
})}

---

如果我在那里使用defaultChecked，它将设置为每个单选按钮。

您需要向您的

defaultChecked

添加一个条件，并删除

checked

属性：

const colors=[“蓝色”、“绿色”、“红色”]
函数App（）{
返回颜色。贴图（（颜色，索引）=>(
{color}
))
}
ReactDOM.render（，document.getElementById（'app'））

euoeu

如果要检查第一项

{colors.map((color, index) => {
  return (
    <label className="color-checkmark" key={index}>
      <input
        type="radio"
        name="color"
        value={color}
        defaultChecked={!(!!index)}
      />
    </label>
  );
})}

{colors.map（（颜色，索引）=>{
返回(
);
})}

什么是

做什么

确保值始终为布尔值或转换为布尔值。
您需要删除
checked=“checked”
属性，因为它与
defaultChecked
属性冲突。然后添加
defaultChecked={index==0}
我只想默认选中我的第一个单选按钮，没有任何条件。然后我更新了我的答案。仅当索引=0时，才需要设置defaultChecked。不要忘记删除您在示例中输入的
checked
属性。对于我来说，请参见示例。这意味着您忘记了什么，请再次检查。您希望默认检查哪个项目？默认情况下检查的第一个项目。此操作无效。它只是检查了每个单选按钮。使用索引？是的，使用索引也只是将每个单选按钮设置为在HTML DOM中检查。请参阅上面的代码，并从输入中删除
checked=“checked”
。您实际上不需要执行
！（！！index）
在这种情况下，因为它是零索引，所以您可以执行
！索引
，它将计算为true。