为什么离子切换开关在使用反冲时相互影响?

Question

我有两个Ionic拨动开关，它们在与Recoil一起使用时相互影响。当我控制它们时，最初它们显示正确的默认值，但当我将OFF切换到ON时，ON切换到OFF并在控制台中显示未定义。这就像我不能同时打开它们，但可以关闭它们。我哪里做错了?

Atom.ts:

import { atom } from "recoil";
interface Settings {
showCoords?: boolean;
showAnimations?: boolean;
}
const defaultSettings: Settings = {
showCoords: false,
showAnimations: true,
};
export const SettingsState = atom<Settings>({
key: "settingsState",
default: defaultSettings,
});

Settings.tsx:

const [mySettings, setMySettings] = useRecoilState(SettingsState);
const thisCoords = mySettings.showCoords;
const thisAnimations = mySettings.showAnimations;

<ion-item>
<ion-label>Vis koordinater</ion-label>
<ion-toggle
id="showCoords"
name="showCoords"
checked={thisCoords}
onClick={() => setMySettings({ showCoords: !thisCoords })}
></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Vis animationer</ion-label>
<ion-toggle
id="showAnimations"
name="showAnimations"
checked={thisAnimations}
onClick={() => setMySettings({ showAnimations: !thisAnimations })}
></ion-toggle>
</ion-item>

Answer 1

您使用了所有错误的模板标签。你需要使用react样式标签。

<IonItem>
<IonLabel>
<IonToggle>

查看文档