切换单选按钮数组React的选中状态

Question

如何为映射的项数组切换checked道具？

{Object.values(equipment).map((item, i) => {
return (              
<IonItem key={item}>
<IonLabel>{item}</IonLabel>
<IonRadio mode="md" slot="start" value={item} checked={false} onClick={} />
</IonItem>
);
})
}

Answer 1

我还没有测试过这段代码，但这将是一种通用的方法

在功能组件中使用reasesuseState可能对您有用。

// Import useState
import { useState } from 'react';
// Set your active and SetActive items
const [active, setActive] = useState({});
{Object.values(equipment).map((item, i) => {
return (
<IonItem key={item}>
<IonLabel>{item}</IonLabel>
<IonRadio mode="md" slot="start" value={item} checked={active.i || false} onClick={() => {
// Set the specific Item to active
setActive({i:!active.i});
}} />
</IonItem>
);
})}