如何处理@ionic-react中IonToggle组件的变更事件并获取布尔值？

问题原因 #

IonToggle 底层封装了原生的 checkbox 输入框，原生输入框未自定义value时默认返回值固定为字符串 "on"，你代码中使用的datatype="boolean"属性不是IonToggle的官方支持属性，不会生效。要获取开关的布尔状态，需要从Ionic封装的自定义事件字段中取值。

正确实现方式 #

推荐使用Ionic组件专属的onIonChange事件，从事件的detail.checked字段直接获取布尔类型的开关状态，配合受控组件写法实现状态同步：

import { IonToggle, IonItem, IonLabel } from "@ionic/react";
import { useState } from 'react';

const DemoComponent = () => {
  // 存储开关状态的布尔类型state
  const [enablePhoto, setEnablePhoto] = useState(false);

  return (
    <IonItem>
      <IonLabel color="primary" position="stacked">
        Enable Photo
      </IonLabel>
      <IonToggle 
        checked={enablePhoto}
        onIonChange={(e) => {
          const currentStatus = e.detail.checked;
          console.log('开关状态：', currentStatus); // 输出 true 或 false
          setEnablePhoto(currentStatus);
        }}
      />
    </IonItem>
  )
}

注意事项 #

• 不要直接读取e.target.value，该值固定为字符串"on"，和开关开启状态无关
• 受控组件写法必须绑定checked属性到对应state，避免UI和内存状态不同步的问题
• 优先使用Ionic暴露的onIonChange事件，比原生onChange兼容性更高，不会出现时序问题

内容的提问来源于stack exchange，提问作者Young Al Capone