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

【问题标题】：Toggle checked state for an array of radio buttons React切换单选按钮数组的选中状态
【发布时间】：2020-06-08 11:47:41
【问题描述】：

我如何切换 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>
      );
    })
}

【问题讨论】：

您是否使用基于类的基于函数的组件？
@dsadnick 我在 Ionic 框架中使用功能组件。
@dsadnick 在这里我将对象值映射到我的 React JSX。

标签： arrays reactjs ionic-framework toggle jsx

【解决方案1】：

我没有测试过这段代码，但这是一个通用的方法。

在功能组件中使用 react 的 useState 可能对你有用。

// 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>
    );
})}

【讨论】：

谢谢！我没有想到以这种方式接近它！我尝试实现这一点，但我收到由 setActive({i:false}); 引起的错误导致许多重新渲染？
@JordanSpackman 我稍微修改了一下。但是您可能仍然需要对其进行一些更改才能使其正常工作。