我正在為一組單選按鈕構建一個組件，該按鈕在選中的單選組件上設定一個類。
export default function RadioBlockGroup({
options,
radioName,
isChecked
}){
const [radioIsChecked, setIsChecked] = useState(isChecked);
return(
{options.map((option, i) => {
return (
<Radio
key={i}
radioID={option.radioID}
radioName={radioName}
radioLabel={option.radioLabel}
radioClass={`${(radioIsChecked === option.radioID) ? "active" : ""} `}
onChange={() => setIsChecked(option.radioID)}
isChecked={option.isChecked}
/>
)
})}
);
}
這很好用，除非我將其中一個單選按鈕設定為“選中” - 這樣做會破壞單擊和更改所選單選按鈕的能力。
radioName: "radio-blocks",
options: [
{
radioID: "1",
radioLabel: "One",
},
{
radioID: "2",
radioLabel: "Two",
isChecked: true,
}
]
我錯過了什么？
uj5u.com熱心網友回復：
簡單的答案：您正在對isChecked屬性進行硬編碼，因此無論您單擊哪個按鈕option，isChecked屬性集都true將始終是選中的那個。所以嘗試這樣做
export default function RadioBlockGroup({
options,
radioName,
isChecked
}){
const [radioIsChecked, setIsChecked] = useState(isChecked);
return(
{options.map((option, i) => {
return (
<Radio
key={i}
radioID={option.radioID}
radioName={radioName}
radioLabel={option.radioLabel}
radioClass={`${(radioIsChecked === option.radioID) ? "active" : ""} `}
onChange={() => setIsChecked(option.radioID)}
isChecked={radioIsChecked === option.radioID}
/>
)
})}
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/513841.html
標籤：反应故事书