时间戳

首页 > 解决方案 > 切换单选按钮数组的选中状态

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

问题描述

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

标签： arraysreactjsionic-frameworktogglejsx

解决方案

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

在功能组件中使用 reacts 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>
    );
})}

推荐阅读