动态生成的单选按钮的状态

Question

我试图只将一个类传递给组件中选中的单选按钮，但使用我现有的代码，所有单选按钮都会接收该类。有什么建议吗？

export default function RadioGroup({options}){

const [isChecked, setIsChecked] = useState(false);

return(
<>
{options.map(option => {
return (
<Radio
radioID={option.id}
radioName={name}
radioLabel={option.label}
radioClass={` ${isChecked ? "bg-blue" : ""}`}
onChange={() => setIsChecked((prev) => !prev)}
/>
)
})}
</>
);
}

Answer 1

您不必在setIsChecked中传递Boolean，而是必须传递id，然后才能在id基础上添加bg-blue类，如您所见，如下代码。

export default function RadioGroup({options}){

const [isChecked, setIsChecked] = useState(null);

return(
<>
{options.map(option => {
return (
<Radio
radioID={option.id}
radioName={name}
radioLabel={option.label}
radioClass={` ${(isChecked === option.id) ? "bg-blue" : ""}`}
onChange={() => setIsChecked(option.id)}
/>
)
})}
</>
);
}