如何处理@ionic-react切换项中的更改？

Question

我正在使用@ionic-react库，现在我必须添加一个简单的IonToggle真/假值，但我被卡住了，我无法处理变化，有趣的是，如果我每次都在屏幕上打印我看到的新值“开”。如何在@ionic-react Toggle中处理事件？

代码：

    import { IonToggle } from "@ionic/react";
/...
.../    
    <IonItem>
        <IonLabel color="primary" position="stacked">
            Enable Photo
        </IonLabel>
        <IonToggle datatype = "boolean" onChange={(e) => {console.log('test')}}/>
    </IonItem>

结果：

​

我希望值为true/false。你有什么想法吗？:)

Answer 1

可以使用state来管理切换值(true/false)

import React, { useState } from 'react';

const YourContainer: React.FC<ContainerProps> = ({ name }) => {

  // here you set the initial state using the useState hook:
  const [isChecked, setIsChecked] = useState(false);
  
  const buttonToggle = () => {
    setIsChecked(!isChecked);
  }

  return (
    <IonContent>
      <IonList>
       <IonItem>
          <IonLabel color="primary" position="stacked">
            Enable Photo
          </IonLabel>
          <IonToggle checked={isChecked} onChange={(e) => buttonToggle()}/>
        </IonItem>
      </IonList>
    </IonContent>
  )
}